454 lines
18 KiB
TypeScript
454 lines
18 KiB
TypeScript
|
'use client'
|
|||
|
|
|
|||
|
|
import { useState, useRef, useEffect, useCallback } from "react"
|
|||
|
|
import Link from "next/link"
|
|||
|
|
|
|||
|
|
interface OcrBlock {
|
|||
|
|
page: number
|
|||
|
|
ocr_result: Array<
|
|||
|
|
[
|
|||
|
|
[[number, number], [number, number], [number, number], [number, number]],
|
|||
|
|
[string, number],
|
|||
|
|
]
|
|||
|
|
>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface OcrResponse {
|
|||
|
|
resultcode: number
|
|||
|
|
message: string
|
|||
|
|
data: OcrBlock[]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface BoundingBox {
|
|||
|
|
left: number
|
|||
|
|
top: number
|
|||
|
|
width: number
|
|||
|
|
height: number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface TextBlock {
|
|||
|
|
text: string
|
|||
|
|
confidence: number
|
|||
|
|
box: BoundingBox
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function OcrPage() {
|
|||
|
|
const [file, setFile] = useState<File | null>(null)
|
|||
|
|
const [imageUrl, setImageUrl] = useState<string | null>(null)
|
|||
|
|
const [isPdf, setIsPdf] = useState(false)
|
|||
|
|
const [ocrData, setOcrData] = useState<OcrResponse | null>(null)
|
|||
|
|
const [loading, setLoading] = useState(false)
|
|||
|
|
const [error, setError] = useState("")
|
|||
|
|
const [dragOver, setDragOver] = useState(false)
|
|||
|
|
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
|
|||
|
|
const [copied, setCopied] = useState(false)
|
|||
|
|
const imageRef = useRef<HTMLImageElement>(null)
|
|||
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|||
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|||
|
|
const [scale, setScale] = useState({ x: 1, y: 1 })
|
|||
|
|
const [imgLoaded, setImgLoaded] = useState(false)
|
|||
|
|
|
|||
|
|
const resetState = useCallback(() => {
|
|||
|
|
setOcrData(null)
|
|||
|
|
setError("")
|
|||
|
|
setCopied(false)
|
|||
|
|
setHoveredIndex(null)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const handleFile = useCallback((f: File) => {
|
|||
|
|
resetState()
|
|||
|
|
setFile(f)
|
|||
|
|
setLoading(true)
|
|||
|
|
|
|||
|
|
const isImage = f.type.startsWith("image/")
|
|||
|
|
const isPdfFile = f.type === "application/pdf"
|
|||
|
|
|
|||
|
|
setIsPdf(isPdfFile)
|
|||
|
|
|
|||
|
|
if (isImage) {
|
|||
|
|
if (imageUrl) URL.revokeObjectURL(imageUrl)
|
|||
|
|
const url = URL.createObjectURL(f)
|
|||
|
|
setImageUrl(url)
|
|||
|
|
setImgLoaded(false)
|
|||
|
|
} else {
|
|||
|
|
setImageUrl(null)
|
|||
|
|
setImgLoaded(false)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const formData = new FormData()
|
|||
|
|
formData.append("file", f)
|
|||
|
|
|
|||
|
|
fetch("/api/ocr", {
|
|||
|
|
method: "POST",
|
|||
|
|
body: formData,
|
|||
|
|
})
|
|||
|
|
.then((res) => res.json().catch(() => null))
|
|||
|
|
.then((data: OcrResponse | null) => {
|
|||
|
|
if (!data || data.resultcode !== 200) {
|
|||
|
|
throw new Error(data?.message || "OCR 识别失败")
|
|||
|
|
}
|
|||
|
|
setOcrData(data)
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
setError(err.message || "OCR 识别失败，请稍后重试")
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
setLoading(false)
|
|||
|
|
})
|
|||
|
|
}, [resetState, imageUrl])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
return () => {
|
|||
|
|
if (imageUrl) URL.revokeObjectURL(imageUrl)
|
|||
|
|
}
|
|||
|
|
}, [imageUrl])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const handlePaste = (e: ClipboardEvent) => {
|
|||
|
|
const items = e.clipboardData?.items
|
|||
|
|
if (!items) return
|
|||
|
|
|
|||
|
|
for (const item of items) {
|
|||
|
|
if (item.type.startsWith("image/")) {
|
|||
|
|
e.preventDefault()
|
|||
|
|
const blob = item.getAsFile()
|
|||
|
|
if (blob) {
|
|||
|
|
handleFile(blob)
|
|||
|
|
}
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.addEventListener("paste", handlePaste)
|
|||
|
|
return () => document.removeEventListener("paste", handlePaste)
|
|||
|
|
}, [handleFile])
|
|||
|
|
|
|||
|
|
const handleDrop = useCallback(
|
|||
|
|
(e: React.DragEvent) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
setDragOver(false)
|
|||
|
|
const f = e.dataTransfer.files[0]
|
|||
|
|
if (f) handleFile(f)
|
|||
|
|
},
|
|||
|
|
[handleFile],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const handleDragOver = useCallback((e: React.DragEvent) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
setDragOver(true)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
setDragOver(false)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const handleFileSelect = useCallback(
|
|||
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|||
|
|
const f = e.target.files?.[0]
|
|||
|
|
if (f) handleFile(f)
|
|||
|
|
},
|
|||
|
|
[handleFile],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const handleImageLoad = useCallback(() => {
|
|||
|
|
const img = imageRef.current
|
|||
|
|
if (!img) return
|
|||
|
|
setScale({
|
|||
|
|
x: img.clientWidth / img.naturalWidth,
|
|||
|
|
y: img.clientHeight / img.naturalHeight,
|
|||
|
|
})
|
|||
|
|
setImgLoaded(true)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const allTextBlocks: TextBlock[] =
|
|||
|
|
ocrData?.data?.flatMap((page) =>
|
|||
|
|
page.ocr_result.map(([coords, [text, confidence]]) => {
|
|||
|
|
const xs = coords.map((c) => c[0])
|
|||
|
|
const ys = coords.map((c) => c[1])
|
|||
|
|
const left = Math.min(...xs)
|
|||
|
|
const top = Math.min(...ys)
|
|||
|
|
const right = Math.max(...xs)
|
|||
|
|
const bottom = Math.max(...ys)
|
|||
|
|
return {
|
|||
|
|
text,
|
|||
|
|
confidence,
|
|||
|
|
box: {
|
|||
|
|
left,
|
|||
|
|
top,
|
|||
|
|
width: right - left,
|
|||
|
|
height: bottom - top,
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}),
|
|||
|
|
) ?? []
|
|||
|
|
|
|||
|
|
const handleCopyAll = useCallback(async () => {
|
|||
|
|
const text = allTextBlocks.map((b) => b.text).join("\n")
|
|||
|
|
await navigator.clipboard.writeText(text)
|
|||
|
|
setCopied(true)
|
|||
|
|
setTimeout(() => setCopied(false), 2000)
|
|||
|
|
}, [allTextBlocks])
|
|||
|
|
|
|||
|
|
const handleCopyBlock = useCallback(async (text: string) => {
|
|||
|
|
await navigator.clipboard.writeText(text)
|
|||
|
|
setCopied(true)
|
|||
|
|
setTimeout(() => setCopied(false), 2000)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-gray-50">
|
|||
|
|
<nav className="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-50 shadow-sm">
|
|||
|
|
<div className="max-w-6xl mx-auto px-6 py-3">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<Link href="/" className="flex items-center gap-2">
|
|||
|
|
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
|||
|
|
<span className="text-white font-bold text-sm">AI</span>
|
|||
|
|
</div>
|
|||
|
|
<span className="font-bold text-gray-900">冲浪智能体广场</span>
|
|||
|
|
</Link>
|
|||
|
|
<div className="flex items-center gap-6">
|
|||
|
|
<Link href="/" className="text-gray-600 hover:text-blue-600 transition">首页</Link>
|
|||
|
|
<Link href="/agents" className="text-gray-600 hover:text-blue-600 transition">智能体广场</Link>
|
|||
|
|
<Link href="/news" className="text-gray-600 hover:text-blue-600 transition">新闻动态</Link>
|
|||
|
|
<Link href="/ocr" className="text-blue-600 font-medium transition">OCR识别</Link>
|
|||
|
|
<Link
|
|||
|
|
href="/admin/login"
|
|||
|
|
className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition"
|
|||
|
|
>
|
|||
|
|
登录
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<main className="pt-20 pb-12">
|
|||
|
|
<div className="max-w-6xl mx-auto px-6">
|
|||
|
|
<div className="text-center mb-8">
|
|||
|
|
<h1 className="text-2xl font-bold text-gray-900 mb-2">OCR 文字识别</h1>
|
|||
|
|
<p className="text-gray-500">上传图片或截图粘贴，自动识别图片中的文字内容</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
className={`relative border-2 border-dashed rounded-2xl p-10 text-center cursor-pointer transition-all duration-300 mb-6 ${
|
|||
|
|
dragOver
|
|||
|
|
? "border-blue-400 bg-blue-50"
|
|||
|
|
: "border-gray-300 bg-white hover:border-blue-300 hover:bg-gray-50"
|
|||
|
|
}`}
|
|||
|
|
onDrop={handleDrop}
|
|||
|
|
onDragOver={handleDragOver}
|
|||
|
|
onDragLeave={handleDragLeave}
|
|||
|
|
onClick={() => fileInputRef.current?.click()}
|
|||
|
|
>
|
|||
|
|
<input
|
|||
|
|
ref={fileInputRef}
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*,.pdf"
|
|||
|
|
className="hidden"
|
|||
|
|
onChange={handleFileSelect}
|
|||
|
|
/>
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="flex flex-col items-center gap-3">
|
|||
|
|
<div className="w-10 h-10 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin" />
|
|||
|
|
<p className="text-gray-500">正在识别中...</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="flex flex-col items-center gap-3">
|
|||
|
|
<div className="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center">
|
|||
|
|
<i className="fa-solid fa-file-image text-2xl text-blue-600" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-gray-700 font-medium">
|
|||
|
|
点击上传或拖拽文件到此区域
|
|||
|
|
</p>
|
|||
|
|
<p className="text-gray-400 text-sm mt-1">
|
|||
|
|
支持图片格式 (PNG, JPG) 或 Ctrl+V 粘贴截图
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{error && (
|
|||
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm mb-6">
|
|||
|
|
{error}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{(imageUrl || isPdf) && ocrData && (
|
|||
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|||
|
|
{imageUrl && (
|
|||
|
|
<div className="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
|
|||
|
|
<div className="px-5 py-3 border-b border-gray-100 bg-gray-50 flex items-center gap-2">
|
|||
|
|
<i className="fa-solid fa-image text-blue-600" />
|
|||
|
|
<span className="font-medium text-gray-700 text-sm">图片预览</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4">
|
|||
|
|
<div ref={containerRef} className="relative inline-block max-w-full">
|
|||
|
|
<img
|
|||
|
|
ref={imageRef}
|
|||
|
|
src={imageUrl}
|
|||
|
|
alt="上传图片"
|
|||
|
|
className="max-w-full h-auto rounded-lg"
|
|||
|
|
onLoad={handleImageLoad}
|
|||
|
|
onDragStart={(e) => e.preventDefault()}
|
|||
|
|
/>
|
|||
|
|
{imgLoaded &&
|
|||
|
|
allTextBlocks.map((block, idx) => (
|
|||
|
|
<div
|
|||
|
|
key={idx}
|
|||
|
|
className="absolute border-2 pointer-events-none transition-all duration-200"
|
|||
|
|
style={{
|
|||
|
|
left: block.box.left * scale.x,
|
|||
|
|
top: block.box.top * scale.y,
|
|||
|
|
width: block.box.width * scale.x,
|
|||
|
|
height: block.box.height * scale.y,
|
|||
|
|
borderColor:
|
|||
|
|
hoveredIndex === idx
|
|||
|
|
? "rgba(59, 130, 246, 0.9)"
|
|||
|
|
: "rgba(59, 130, 246, 0.4)",
|
|||
|
|
backgroundColor:
|
|||
|
|
hoveredIndex === idx
|
|||
|
|
? "rgba(59, 130, 246, 0.15)"
|
|||
|
|
: "rgba(59, 130, 246, 0.08)",
|
|||
|
|
zIndex: hoveredIndex === idx ? 10 : 1,
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{isPdf && !imageUrl && (
|
|||
|
|
<div className="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
|
|||
|
|
<div className="px-5 py-3 border-b border-gray-100 bg-gray-50 flex items-center gap-2">
|
|||
|
|
<i className="fa-solid fa-file-pdf text-red-500" />
|
|||
|
|
<span className="font-medium text-gray-700 text-sm">PDF 文件</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-12 flex flex-col items-center justify-center text-gray-400">
|
|||
|
|
<i className="fa-solid fa-file-pdf text-5xl mb-4 text-red-300" />
|
|||
|
|
<p className="text-sm">{file?.name}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden flex flex-col">
|
|||
|
|
<div className="px-5 py-3 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<i className="fa-solid fa-list text-blue-600" />
|
|||
|
|
<span className="font-medium text-gray-700 text-sm">识别结果</span>
|
|||
|
|
<span className="text-xs text-gray-400">
|
|||
|
|
({ocrData?.message || ""})
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={handleCopyAll}
|
|||
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition ${
|
|||
|
|
copied
|
|||
|
|
? "bg-green-50 text-green-600"
|
|||
|
|
: "bg-gray-100 text-gray-600 hover:bg-blue-50 hover:text-blue-600"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<i className={`fa-solid ${copied ? "fa-check" : "fa-copy"}`} />
|
|||
|
|
{copied ? "已复制" : "复制全部"}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-1 overflow-y-auto max-h-[500px] p-4 space-y-2">
|
|||
|
|
{allTextBlocks.length === 0 ? (
|
|||
|
|
<p className="text-gray-400 text-sm text-center py-8">未识别到文字</p>
|
|||
|
|
) : (
|
|||
|
|
allTextBlocks.map((block, idx) => (
|
|||
|
|
<div
|
|||
|
|
key={idx}
|
|||
|
|
className={`group flex items-start gap-3 p-3 rounded-xl cursor-pointer transition-colors ${
|
|||
|
|
hoveredIndex === idx
|
|||
|
|
? "bg-blue-50 ring-1 ring-blue-200"
|
|||
|
|
: "hover:bg-gray-50"
|
|||
|
|
}`}
|
|||
|
|
onMouseEnter={() => setHoveredIndex(idx)}
|
|||
|
|
onMouseLeave={() => setHoveredIndex(null)}
|
|||
|
|
onClick={() => handleCopyBlock(block.text)}
|
|||
|
|
>
|
|||
|
|
<span className="flex-shrink-0 w-6 h-6 bg-gray-100 rounded-full flex items-center justify-center text-xs font-medium text-gray-500 group-hover:bg-blue-100 group-hover:text-blue-600 transition-colors">
|
|||
|
|
{idx + 1}
|
|||
|
|
</span>
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<p className="text-sm text-gray-800 leading-relaxed break-all">
|
|||
|
|
{block.text}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-xs text-gray-400 mt-1">
|
|||
|
|
置信度: {(block.confidence * 100).toFixed(1)}%
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
handleCopyBlock(block.text)
|
|||
|
|
}}
|
|||
|
|
className="flex-shrink-0 w-7 h-7 rounded-lg flex items-center justify-center text-gray-400 opacity-0 group-hover:opacity-100 hover:bg-blue-100 hover:text-blue-600 transition-all"
|
|||
|
|
>
|
|||
|
|
<i className="fa-solid fa-copy text-xs" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{!file && !loading && (
|
|||
|
|
<div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-8">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|||
|
|
<div className="text-center p-4">
|
|||
|
|
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|||
|
|
<i className="fa-solid fa-upload text-blue-600 text-xl" />
|
|||
|
|
</div>
|
|||
|
|
<h3 className="font-medium text-gray-900 mb-1">图片上传</h3>
|
|||
|
|
<p className="text-xs text-gray-400">支持 PNG、JPG 等常见图片格式</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center p-4">
|
|||
|
|
<div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|||
|
|
<i className="fa-solid fa-paste text-green-600 text-xl" />
|
|||
|
|
</div>
|
|||
|
|
<h3 className="font-medium text-gray-900 mb-1">截图粘贴</h3>
|
|||
|
|
<p className="text-xs text-gray-400">使用 Ctrl+V 快速粘贴截图识别</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center p-4">
|
|||
|
|
<div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|||
|
|
<i className="fa-solid fa-arrows-alt text-purple-600 text-xl" />
|
|||
|
|
</div>
|
|||
|
|
<h3 className="font-medium text-gray-900 mb-1">拖拽上传</h3>
|
|||
|
|
<p className="text-xs text-gray-400">拖拽文件到上传区域即可识别</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<div className="border-t border-gray-200 py-8 mt-auto">
|
|||
|
|
<div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="w-7 h-7 bg-blue-600 rounded-lg flex items-center justify-center">
|
|||
|
|
<span className="text-white font-bold text-xs">AI</span>
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold text-gray-700 text-sm">江苏冲浪软件科技有限公司</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-gray-400 text-sm text-center">
|
|||
|
|
© 2026 江苏冲浪软件科技有限公司 · AI 智能体广场
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-4 text-xs text-gray-400">
|
|||
|
|
<a className="hover:text-gray-600 cursor-pointer transition">关于我们</a>
|
|||
|
|
<a className="hover:text-gray-600 cursor-pointer transition">隐私政策</a>
|
|||
|
|
<a className="hover:text-gray-600 cursor-pointer transition">联系我们</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|