'commit'

static/js/haibao.js

@@ -0,0 +1,144 @@
+const { createApp, ref, onMounted } = Vue;
+
+const app = createApp({
+    setup() {
+        const prompt = ref('');
+        const generating = ref(false);
+        const refining = ref(false);
+        const currentImage = ref(null);
+        const historyList = ref([]);
+        const presets = ['清明节', '春节', '国庆十一', '端午节', '中秋节', '绿色出行', '低碳生活', '未来科技充电站'];
+        
+        // Load history
+        const loadHistory = async () => {
+            try {
+                const res = await axios.get('/haibao/history');
+                historyList.value = res.data;
+                // If history exists, show the latest one as current
+                if (historyList.value.length > 0 && !currentImage.value) {
+                    currentImage.value = historyList.value[0];
+                }
+            } catch (e) {
+                console.error('Failed to load history', e);
+                ElementPlus.ElMessage.error('加载历史记录失败');
+            }
+        };
+
+        // Refine Prompt
+        const handleRefine = async () => {
+            if (!prompt.value.trim()) {
+                ElementPlus.ElMessage.warning('请先输入一些关键词');
+                return;
+            }
+            
+            refining.value = true;
+            const originalPrompt = prompt.value;
+            let isFirstChunk = true;
+            
+            try {
+                const response = await fetch('/haibao/refine', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ prompt: originalPrompt })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) break;
+                    
+                    const text = decoder.decode(value, { stream: true });
+                    
+                    if (isFirstChunk) {
+                        prompt.value = '';
+                        isFirstChunk = false;
+                    }
+                    prompt.value += text;
+                }
+                
+                ElementPlus.ElMessage.success('创意扩写完成');
+            } catch (e) {
+                console.error('Refine failed', e);
+                ElementPlus.ElMessage.error('扩写失败: ' + e.message);
+            } finally {
+                refining.value = false;
+            }
+        };
+        
+        // Generate
+        const handleGenerate = async () => {
+            if (!prompt.value.trim()) {
+                ElementPlus.ElMessage.warning('请输入提示词');
+                return;
+            }
+            
+            generating.value = true;
+            try {
+                const res = await axios.post('/haibao/generate', {
+                    prompt: prompt.value
+                });
+                
+                currentImage.value = res.data;
+                ElementPlus.ElMessage.success('生成成功');
+                // Insert new item to history locally to avoid delay
+                historyList.value.unshift(res.data);
+            } catch (e) {
+                console.error('Generation failed', e);
+                ElementPlus.ElMessage.error('生成失败: ' + (e.response?.data?.detail || e.message));
+            } finally {
+                generating.value = false;
+            }
+        };
+        
+        // Use preset
+        const usePreset = (text) => {
+            prompt.value = text;
+        };
+        
+        // View history item
+        const viewHistory = (item) => {
+            currentImage.value = item;
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        };
+        
+        // Copy Scheme
+        const copyScheme = async () => {
+            if (!currentImage.value || !currentImage.value.scheme_content) return;
+            try {
+                await navigator.clipboard.writeText(currentImage.value.scheme_content);
+                ElementPlus.ElMessage.success('文案已复制到剪贴板');
+            } catch (err) {
+                console.error('Failed to copy text: ', err);
+                ElementPlus.ElMessage.error('复制失败，请手动复制');
+            }
+        };
+
+        onMounted(() => {
+            loadHistory();
+        });
+        
+        return {
+            prompt,
+            generating,
+            currentImage,
+            historyList,
+            presets,
+            handleGenerate,
+            handleRefine,
+            usePreset,
+            viewHistory,
+            copyScheme
+        };
+    }
+});
+
+app.use(ElementPlus);
+app.mount('#app');