639 lines
15 KiB
Vue
639 lines
15 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import axios from "axios";
|
|
|
|
const API_KEY = "sk-6ba4b57a0b034d9388f7a7a2d477d637";
|
|
const API_URL = "https://grsai.dakka.com.cn/v1/draw/nano-banana";
|
|
const PROMPT =
|
|
"请对这篇英语作文进行批改，标注语法错误、拼写错误和表达不当之处，并给出修改建议，使用中文批注";
|
|
|
|
const router = useRouter();
|
|
|
|
// state: idle | processing | done | error
|
|
const status = ref("idle");
|
|
const originalImage = ref(null); // data URL for preview
|
|
const originalBase64 = ref(""); // pure base64 string
|
|
const resultImage = ref(""); // corrected image URL
|
|
const errorMsg = ref("");
|
|
const isDragOver = ref(false);
|
|
const fileInputRef = ref(null);
|
|
const lightboxSrc = ref("");
|
|
const lightboxVisible = ref(false);
|
|
|
|
const goBack = () => router.back();
|
|
|
|
const readFileAsBase64 = (file) =>
|
|
new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
const dataUrl = e.target.result;
|
|
resolve({ dataUrl, base64: dataUrl.split(",")[1] });
|
|
};
|
|
reader.onerror = reject;
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
const handleFile = async (file) => {
|
|
if (!file) return;
|
|
const allowed = ["image/jpeg", "image/jpg", "image/png"];
|
|
if (!allowed.includes(file.type)) {
|
|
errorMsg.value = "仅支持 JPG / PNG 格式的图片";
|
|
return;
|
|
}
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
errorMsg.value = "图片大小不能超过 10MB";
|
|
return;
|
|
}
|
|
errorMsg.value = "";
|
|
resultImage.value = "";
|
|
status.value = "idle";
|
|
const { dataUrl, base64 } = await readFileAsBase64(file);
|
|
originalImage.value = dataUrl;
|
|
originalBase64.value = base64;
|
|
};
|
|
|
|
const onFileChange = (e) => handleFile(e.target.files[0]);
|
|
|
|
const onDrop = (e) => {
|
|
isDragOver.value = false;
|
|
handleFile(e.dataTransfer.files[0]);
|
|
};
|
|
|
|
const resetUpload = () => {
|
|
originalImage.value = null;
|
|
originalBase64.value = "";
|
|
resultImage.value = "";
|
|
errorMsg.value = "";
|
|
status.value = "idle";
|
|
if (fileInputRef.value) fileInputRef.value.value = "";
|
|
};
|
|
|
|
const startCorrection = async () => {
|
|
if (!originalBase64.value || status.value === "processing") return;
|
|
status.value = "processing";
|
|
errorMsg.value = "";
|
|
resultImage.value = "";
|
|
|
|
const res = await axios
|
|
.post(
|
|
API_URL,
|
|
{
|
|
model: "nano-banana-pro",
|
|
prompt: PROMPT,
|
|
aspectRatio: "auto",
|
|
imageSize: "1K",
|
|
urls: [originalBase64.value],
|
|
webHook: "",
|
|
shutProgress: true,
|
|
},
|
|
{
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${API_KEY}`,
|
|
},
|
|
}
|
|
)
|
|
.catch((err) => {
|
|
console.error(err);
|
|
errorMsg.value =
|
|
err?.response?.data?.message || err.message || "请求失败，请稍后重试";
|
|
status.value = "error";
|
|
return null;
|
|
});
|
|
|
|
if (!res) return;
|
|
|
|
// 接口返回 SSE 格式文本，形如 "data: {...}\n\n"，需去掉 "data: " 前缀再解析
|
|
let data;
|
|
try {
|
|
const raw = typeof res.data === "string" ? res.data : JSON.stringify(res.data);
|
|
const jsonStr = raw.replace(/^data:\s*/m, "").trim();
|
|
data = JSON.parse(jsonStr);
|
|
} catch {
|
|
data = res.data;
|
|
}
|
|
|
|
// 根据实际返回格式解析：{ results: [{ url, content }], progress, status }
|
|
if (data?.status && data.status !== "succeeded") {
|
|
errorMsg.value = `批改失败：${
|
|
data.failure_reason || data.error || data.status
|
|
}`;
|
|
status.value = "error";
|
|
return;
|
|
}
|
|
|
|
const imgUrl =
|
|
(Array.isArray(data?.results) && data.results[0]?.url) || data?.url || null;
|
|
|
|
if (imgUrl) {
|
|
resultImage.value = imgUrl;
|
|
status.value = "done";
|
|
} else {
|
|
console.error("未能解析到图片地址", data);
|
|
errorMsg.value = "批改完成，但未能获取结果图片，请检查 API 返回格式";
|
|
status.value = "error";
|
|
}
|
|
};
|
|
|
|
const openLightbox = (src) => {
|
|
lightboxSrc.value = src;
|
|
lightboxVisible.value = true;
|
|
};
|
|
const closeLightbox = () => {
|
|
lightboxVisible.value = false;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-container">
|
|
<!-- Nav Bar -->
|
|
<div class="nav-bar">
|
|
<button class="back-btn" @click="goBack">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<polyline points="15 18 9 12 15 6" />
|
|
</svg>
|
|
<span>返回</span>
|
|
</button>
|
|
<h1 class="nav-title">AI 作文原图批改</h1>
|
|
<div style="width: 72px"></div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- Error Banner -->
|
|
<div v-if="errorMsg" class="error-banner">
|
|
<span>{{ errorMsg }}</span>
|
|
<button class="error-close" @click="errorMsg = ''">✕</button>
|
|
</div>
|
|
|
|
<!-- Upload Zone -->
|
|
<div
|
|
v-if="!originalImage"
|
|
class="upload-zone"
|
|
:class="{ 'drag-over': isDragOver }"
|
|
@click="fileInputRef.click()"
|
|
@dragover.prevent="isDragOver = true"
|
|
@dragleave.prevent="isDragOver = false"
|
|
@drop.prevent="onDrop"
|
|
>
|
|
<input
|
|
ref="fileInputRef"
|
|
type="file"
|
|
accept="image/jpeg,image/jpg,image/png"
|
|
style="display: none"
|
|
@change="onFileChange"
|
|
/>
|
|
<div class="upload-icon">
|
|
<svg
|
|
width="48"
|
|
height="48"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<rect x="3" y="3" width="18" height="18" rx="3" />
|
|
<circle cx="8.5" cy="8.5" r="1.5" />
|
|
<polyline points="21 15 16 10 5 21" />
|
|
</svg>
|
|
</div>
|
|
<p class="upload-title">点击或拖拽上传作文图片</p>
|
|
<p class="upload-hint">支持 JPG、PNG 格式，最大 10MB</p>
|
|
</div>
|
|
|
|
<!-- Preview + Action -->
|
|
<div v-else class="preview-section">
|
|
<div class="preview-card">
|
|
<div class="preview-header">
|
|
<span class="preview-label">原始图片</span>
|
|
<button
|
|
class="reupload-btn"
|
|
@click="resetUpload"
|
|
:disabled="status === 'processing'"
|
|
>
|
|
重新上传
|
|
</button>
|
|
</div>
|
|
<img
|
|
:src="originalImage"
|
|
class="preview-img"
|
|
@click="openLightbox(originalImage)"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
class="correct-btn"
|
|
:disabled="status === 'processing'"
|
|
@click="startCorrection"
|
|
>
|
|
<span v-if="status === 'processing'" class="btn-spinner"></span>
|
|
<svg
|
|
v-else
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M12 20h9" />
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
|
|
</svg>
|
|
<span>{{ status === "processing" ? "批改中..." : "开始批改" }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Result -->
|
|
<div v-if="status === 'done' && resultImage" class="result-section">
|
|
<div class="compare-grid">
|
|
<div class="compare-card">
|
|
<div class="compare-label">原图</div>
|
|
<img
|
|
:src="originalImage"
|
|
class="compare-img"
|
|
@click="openLightbox(originalImage)"
|
|
/>
|
|
</div>
|
|
<div class="compare-card result-card">
|
|
<div class="compare-label result-label">批改结果</div>
|
|
<img
|
|
:src="resultImage"
|
|
class="compare-img"
|
|
@click="openLightbox(resultImage)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p class="click-hint">点击图片可放大查看</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lightbox -->
|
|
<div v-if="lightboxVisible" class="lightbox" @click="closeLightbox">
|
|
<img :src="lightboxSrc" class="lightbox-img" @click.stop />
|
|
<button class="lightbox-close" @click="closeLightbox">✕</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page-container {
|
|
min-height: 100vh;
|
|
background: var(--bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: "PingFang SC", -apple-system, sans-serif;
|
|
}
|
|
|
|
/* Nav */
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.5rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-bottom: 1px solid var(--card-border);
|
|
backdrop-filter: blur(12px);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
.back-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
padding: 0.4rem 0.75rem;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
.back-btn:hover {
|
|
background: rgba(255, 255, 255, 0.07);
|
|
color: var(--text-primary);
|
|
}
|
|
.nav-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
background: linear-gradient(135deg, #ec4899, #db2777);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* Content */
|
|
.content {
|
|
flex: 1;
|
|
max-width: 860px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 2rem 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* Error */
|
|
.error-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(239, 68, 68, 0.12);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
border-radius: 12px;
|
|
padding: 0.875rem 1.25rem;
|
|
color: #fca5a5;
|
|
font-size: 0.95rem;
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
.error-close {
|
|
background: none;
|
|
border: none;
|
|
color: #fca5a5;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
padding: 0 0.25rem;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.error-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Upload Zone */
|
|
.upload-zone {
|
|
border: 2px dashed rgba(236, 72, 153, 0.3);
|
|
border-radius: 20px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
padding: 4rem 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.25s;
|
|
text-align: center;
|
|
}
|
|
.upload-zone:hover,
|
|
.upload-zone.drag-over {
|
|
border-color: #ec4899;
|
|
background: rgba(236, 72, 153, 0.06);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 32px rgba(236, 72, 153, 0.12);
|
|
}
|
|
.upload-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background: rgba(236, 72, 153, 0.1);
|
|
border: 1px solid rgba(236, 72, 153, 0.25);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ec4899;
|
|
transition: all 0.25s;
|
|
}
|
|
.upload-zone:hover .upload-icon,
|
|
.upload-zone.drag-over .upload-icon {
|
|
background: rgba(236, 72, 153, 0.18);
|
|
transform: scale(1.08);
|
|
}
|
|
.upload-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
.upload-hint {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Preview */
|
|
.preview-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
align-items: center;
|
|
}
|
|
.preview-card {
|
|
width: 100%;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.preview-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.875rem 1.25rem;
|
|
border-bottom: 1px solid var(--card-border);
|
|
}
|
|
.preview-label {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
.reupload-btn {
|
|
background: rgba(236, 72, 153, 0.1);
|
|
border: 1px solid rgba(236, 72, 153, 0.25);
|
|
color: #ec4899;
|
|
border-radius: 8px;
|
|
padding: 0.35rem 0.875rem;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.reupload-btn:hover:not(:disabled) {
|
|
background: rgba(236, 72, 153, 0.2);
|
|
}
|
|
.reupload-btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
.preview-img {
|
|
width: 100%;
|
|
max-height: 400px;
|
|
object-fit: contain;
|
|
display: block;
|
|
cursor: zoom-in;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Correct Button */
|
|
.correct-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
background: linear-gradient(135deg, #ec4899, #db2777);
|
|
border: none;
|
|
color: white;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
padding: 0.875rem 2.5rem;
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
transition: all 0.25s;
|
|
box-shadow: 0 4px 20px rgba(236, 72, 153, 0.35);
|
|
}
|
|
.correct-btn:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 28px rgba(236, 72, 153, 0.5);
|
|
}
|
|
.correct-btn:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
.btn-spinner {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid rgba(255, 255, 255, 0.35);
|
|
border-top-color: white;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Result */
|
|
.result-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
animation: fadeIn 0.4s ease;
|
|
}
|
|
.compare-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.25rem;
|
|
}
|
|
.compare-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.compare-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
|
}
|
|
.result-card {
|
|
border-color: rgba(236, 72, 153, 0.3);
|
|
box-shadow: 0 0 20px rgba(236, 72, 153, 0.08);
|
|
}
|
|
.compare-label {
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
border-bottom: 1px solid var(--card-border);
|
|
text-align: center;
|
|
}
|
|
.result-label {
|
|
color: #ec4899;
|
|
}
|
|
.compare-img {
|
|
width: 100%;
|
|
object-fit: contain;
|
|
display: block;
|
|
cursor: zoom-in;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
max-height: 500px;
|
|
}
|
|
.click-hint {
|
|
text-align: center;
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Lightbox */
|
|
.lightbox {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.88);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
animation: fadeIn 0.2s ease;
|
|
cursor: zoom-out;
|
|
}
|
|
.lightbox-img {
|
|
max-width: 92vw;
|
|
max-height: 90vh;
|
|
object-fit: contain;
|
|
border-radius: 12px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
|
|
cursor: default;
|
|
}
|
|
.lightbox-close {
|
|
position: absolute;
|
|
top: 1.25rem;
|
|
right: 1.5rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.2s;
|
|
}
|
|
.lightbox-close:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.compare-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.content {
|
|
padding: 1.25rem 1rem;
|
|
}
|
|
.upload-zone {
|
|
padding: 3rem 1.5rem;
|
|
}
|
|
}
|
|
</style>
|