112 lines
3.2 KiB
Vue
112 lines
3.2 KiB
Vue
<template>
|
|
<MagicoModal v-model="modal" title="Generuj AI">
|
|
<div class="p-1">
|
|
<h5>O czym chcesz napisać?</h5>
|
|
<textarea
|
|
class="form-control mb-3"
|
|
rows="5"
|
|
v-model="text"
|
|
placeholder="Napisz krótki opis, aby AI mogło wygenerować treść."
|
|
></textarea>
|
|
<div class="form-group">
|
|
<label>Ilość znaków</label>
|
|
<select v-model="count" class="form-select">
|
|
<option value="500">500</option>
|
|
<option value="1000">1000</option>
|
|
<option value="2000">2000</option>
|
|
</select>
|
|
</div>
|
|
<div class="text-center mt-3">
|
|
<button :disabled="loader" @click="generate" class="btn btn-primary">
|
|
<span class="spinner-border spinner-border-sm me-2" v-if="loader"></span>
|
|
Generuj
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</MagicoModal>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, ref, watch } from 'vue'
|
|
const modal = ref(true)
|
|
import axios from 'axios';
|
|
import MagicoModal from './MagicoModal.vue'
|
|
// import axios from '@/api/sync-axios'
|
|
const props = defineProps({
|
|
product: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
modelValue: {
|
|
type: Object,
|
|
default: true
|
|
},
|
|
lang: {
|
|
type: String
|
|
},
|
|
callback: {
|
|
type: Function,
|
|
default: () => {}
|
|
}
|
|
})
|
|
const text = ref('')
|
|
const offer = ref({})
|
|
const loader = ref(false)
|
|
onMounted(() => {
|
|
offer.value = props.modelValue
|
|
})
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(newValue) => {
|
|
offer.value = newValue
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
const count = ref(500)
|
|
const emit = defineEmits(['offerGenerated', 'update:modelValue'])
|
|
function generate() {
|
|
const prompt = `Twoim zadaniem jest stworzenie opisu.
|
|
Do "content" wstaw tekst w formacie HTML, jako akapity dla edytora WYSIWYG na podstawie dostarczonej treści na maksymalnie ${count.value} znaków.
|
|
Odpowiedź wygeneruj w języku określanym przez kod kraju: pl.
|
|
Wynik zwróć jako czysty JSON bez dodatkowego formatowania, bez używania \`\`\`json i \`\`\`, bez używania \`\`\`html i \`\`\`:
|
|
{
|
|
"content": ""
|
|
}`
|
|
const query = `${text.value}`
|
|
loader.value = true
|
|
axios
|
|
.post(
|
|
'https://ai.magico.pro/api/v1/message',
|
|
{ prompt, query },
|
|
{
|
|
headers: {
|
|
Authorization: 'Bearer ' + localStorage.getItem('access_token')
|
|
}
|
|
}
|
|
)
|
|
.then((response) => {
|
|
loader.value = false
|
|
modal.value = false // Close the modal after generation
|
|
// Handle the response, e.g., display the generated content
|
|
const jsonText = response.data.data.choices[0].message.content
|
|
const jsonData = JSON.parse(jsonText)
|
|
console.log('Generated Offer Data:', jsonData)
|
|
emit('update:modelValue', offer.value)
|
|
props.callback(jsonData)
|
|
// Assuming you want to do something with the generated data
|
|
// modal.value = false; // Close the modal after generation
|
|
})
|
|
.catch((error) => {
|
|
console.error('Błąd podczas generowania oferty:', error)
|
|
alert('Wystąpił błąd podczas generowania oferty.')
|
|
})
|
|
}
|
|
|
|
function setFeatureValue(featureName, value) {
|
|
const feature = offer.value.features.find((f) => f.feature_name === featureName)
|
|
if (feature) {
|
|
feature.feature_value = value
|
|
}
|
|
}
|
|
</script>
|