+
+
+
+ {/* Trust badges */}
+
+
+
+
+ {/* Example Selector */}
+ + See the Magic in Action +
++ Our AI-powered conversion transforms static images into fully editable diagrams. + Here are some examples of what EditBanana can do. +
+
+ {examples.map((example) => (
+
+ ))}
+
+
+ {/* Before/After Comparison */}
+
+
+
+ + {activeExample.title} +
+{activeExample.description}
+
+ {/* Before */}
+
+
+
+
+ {/* Arrow indicator on mobile */}
+
+
+ Before
+
+
+ setIsHovering(true)}
+ onMouseLeave={() => setIsHovering(false)}
+ >
+ 
+
+
+
+
+
+ + Static image that cannot be edited +
+
+
+
+ {/* After */}
+
+
+
+
+ After
+
+
+
+ 
+
+
+
+
+
+ + Fully editable diagram - modify shapes, text, and connections +
+
+
+
+
+ 99%
+ Accuracy Rate
+
+
+ 10s
+ Avg. Processing
+
+
+ 50K+
+ Diagrams Converted
+
+
+ 4.9★
+ User Rating
+
+
+
+
+
+ + Everything You Need +
++ Powerful features to make diagram conversion simple and accurate +
+
+ {features.map((feature) => (
+
+
+
+ ))}
+
+
+ + {feature.name} +
++ {feature.description} +
+
+
+
+ {/* Badge */}
+
+
+
+
+ {/* Heading */}
+ + Turn Images into + + Editable Diagrams + +
+ + {/* Subheading */} ++ Upload any image or PDF and convert it to editable Draw.io XML or PowerPoint format. + Powered by SAM3 segmentation and OCR technology. +
+ + {/* CTA Button */} + + + {/* Stats */} +
+
+
+
+ 10s
+ Avg. Processing
+
+
+ 99%
+ Accuracy
+
+
+ Free
+ to Try
+
+
+
+
+
+ + Upload Your Image or PDF +
++ We'll convert it to an editable diagram in seconds +
+
+
+
+
+ )}
+
+ {jobStatus === "completed" && (
+
+
+
+
+
+ {progress}% complete
+
+
+ )}
+
+ {error && (
+
+
+ + Your diagram has been converted and is ready to download. +
+ +
+
+ )}
+ {error}
+
+
+ )
+ }
+
+ return <>{children}
+}
+
+// API错误处理
+export class APIError extends Error {
+ constructor(
+ message: string,
+ public statusCode: number,
+ public response?: Response
+ ) {
+ super(message)
+ this.name = "APIError"
+ }
+}
+
+export async function handleAPIError(response: Response): Promise
+
+
+
+ + 出错了 +
++ {error.error?.message || "页面加载时发生错误"} +
+ +
+
+ )
+}
+
+export function LoadingCard() {
+ return (
+ 加载中...
+
+
+ )
+}
diff --git a/apps/web/src/components/navbar.tsx b/apps/web/src/components/navbar.tsx
new file mode 100644
index 0000000..681820c
--- /dev/null
+++ b/apps/web/src/components/navbar.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import Link from "next/link"
+import { useState } from "react"
+import { Menu, X, Github, Banana } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export function Navbar() {
+ const [isOpen, setIsOpen] = useState(false)
+
+ return (
+
+ )
+}
diff --git a/apps/web/src/components/progress/progress-bar.tsx b/apps/web/src/components/progress/progress-bar.tsx
new file mode 100644
index 0000000..2b5859b
--- /dev/null
+++ b/apps/web/src/components/progress/progress-bar.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { cn } from "@/lib/utils"
+import { Check, Loader2 } from "lucide-react"
+
+interface ProgressBarProps {
+ progress: number
+ stage: string
+ message: string
+ isComplete?: boolean
+}
+
+const stages = [
+ { key: "preprocess", label: "预处理", icon: "1" },
+ { key: "text_extraction", label: "文字提取", icon: "2" },
+ { key: "segmentation", label: "图像分割", icon: "3" },
+ { key: "processing", label: "元素处理", icon: "4" },
+ { key: "xml_generation", label: "生成XML", icon: "5" },
+]
+
+export function ProgressBar({
+ progress,
+ stage,
+ message,
+ isComplete,
+}: ProgressBarProps) {
+ const getStageStatus = (stageLabel: string) => {
+ const stageIndex = stages.findIndex((s) => s.label === stage)
+ const currentIndex = stages.findIndex((s) => s.label === stageLabel)
+
+ if (isComplete) return "complete"
+ if (currentIndex < stageIndex) return "complete"
+ if (currentIndex === stageIndex) return "active"
+ return "pending"
+ }
+
+ return (
+ 处理中...
+
+ {/* 进度条 */}
+
+ )
+}
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
new file mode 100644
index 0000000..d4f95a5
--- /dev/null
+++ b/apps/web/src/components/ui/button.tsx
@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils"
+import { ButtonHTMLAttributes, forwardRef } from "react"
+
+interface ButtonProps extends ButtonHTMLAttributes
+
+
+ {/* 进度信息 */}
+
+
+ {stage}
+
+
+ {message}
+
+
+
+ {/* 阶段指示器 */}
+
+
+
+ {/* 百分比 */}
+
+ {stages.map((s, index) => {
+ const status = getStageStatus(s.label)
+ return (
+
+
+
+ {status === "complete" ? (
+
+
+ {s.label}
+
+
+ )
+ })}
+
+ {progress}%
+
+
+ {!selectedFile ? (
+
+ )
+}
diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts
new file mode 100644
index 0000000..13e5bc0
--- /dev/null
+++ b/apps/web/src/lib/api.ts
@@ -0,0 +1,139 @@
+import { API_BASE_URL } from "./config"
+import { UploadResponse, Job } from "./types"
+import { historyStorage, HistoryItem } from "./storage"
+
+// API错误类
+export class APIError extends Error {
+ constructor(
+ message: string,
+ public statusCode?: number,
+ public response?: Response
+ ) {
+ super(message)
+ this.name = "APIError"
+ }
+}
+
+// 统一处理响应
+async function handleResponse
+
+
+ ) : (
+
+
+
+
+
+
+ + {isDragActive ? "释放文件以上传" : "拖拽文件到此处"} +
++ 或点击选择文件，支持 PNG, JPG, PDF 等格式 +
++ 最大支持 10MB +
+
+
+
+
+ )}
+
+ {fileRejections.length > 0 && (
+
+ {preview ? (
+
+
+ 
+
+ ) : (
+
+
+ )}
+
+
+ + {selectedFile.name} +
++ {(selectedFile.size / 1024 / 1024).toFixed(2)} MB +
+
+
+ )}
+ + 文件格式不支持或超过大小限制 +
+