ai plugin modal

2025-07-02 14:20:50 +02:00
parent 12914907bd
commit d0d74e8e99
5 changed files with 303 additions and 117 deletions
--- a/src/components/AIModal.vue
+++ b/src/components/AIModal.vue
@@ -0,0 +1,111 @@
+<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>