diff --git a/.gitignore b/.gitignore index 67dd9e4..8b56209 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ nn/models/*.pt build/bin frontend/node_modules frontend/dist +frontend/public diff --git a/app.db b/app.db index 1d79e28..14325bd 100644 Binary files a/app.db and b/app.db differ diff --git a/frontend/index.html b/frontend/index.html index aba2420..e6ca92f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,9 +3,9 @@ - + dissertation - -->
diff --git a/frontend/public/images/0012.jpg b/frontend/public/images/0012.jpg deleted file mode 100644 index 5c16524..0000000 Binary files a/frontend/public/images/0012.jpg and /dev/null differ diff --git a/frontend/public/images/1784707678705.jpg b/frontend/public/images/1784707678705.jpg deleted file mode 100644 index 1f51ca5..0000000 Binary files a/frontend/public/images/1784707678705.jpg and /dev/null differ diff --git a/frontend/src/components/History.tsx b/frontend/src/components/History.tsx index f15250c..a16d767 100644 --- a/frontend/src/components/History.tsx +++ b/frontend/src/components/History.tsx @@ -1,10 +1,10 @@ import { useState, useEffect } from 'preact/hooks' -import { message } from '../utils/toast' import Pagination from './Pagination' import Modal from './Modal' +import ImagePreview from './ImagePreview' +import { message } from '../utils/toast' import type { HistoryItem } from '../preact' - const formatDate = (timestamp: number) => { const date = new Date(timestamp * 1000) return date.toLocaleString('zh-CN', { @@ -104,7 +104,7 @@ const History = () => { {historyList.map((item: HistoryItem) =>
- +
@@ -122,9 +122,19 @@ const History = () => {
) } -
- -
+ {historyList.length ? +
+ +
: null + } + {!historyList.length ? +
+ + + +

暂无记录

+
: null + }

确定要删除当前记录？

diff --git a/frontend/src/components/ImagePreview.tsx b/frontend/src/components/ImagePreview.tsx new file mode 100644 index 0000000..2409b4a --- /dev/null +++ b/frontend/src/components/ImagePreview.tsx @@ -0,0 +1,27 @@ +import { useState, useEffect } from 'preact/hooks' + +interface Props { + filename: string + class?: string + id?: string +} + +const ImagePreview = ({ filename, ...props }: Props) => { + const [src, setSrc] = useState('') + + useEffect(() => { + const loadImage = async () => { + const result = await (window as any).go.main.App.GetImage(filename) + if (result.code === 0) { + setSrc(result.data) + } + } + loadImage() + }, [filename]) + + if (!src) return
+ + return +} + +export default ImagePreview diff --git a/frontend/src/components/Main.tsx b/frontend/src/components/Main.tsx index 83f1635..deff108 100644 --- a/frontend/src/components/Main.tsx +++ b/frontend/src/components/Main.tsx @@ -1,7 +1,7 @@ import { useState, useRef } from 'preact/hooks' -import { message } from '../utils/toast' import type { DetectResult } from '../preact' - +import ImagePreview from './ImagePreview' +import { message } from '../utils/toast' const Main = () => { const fileInputRef = useRef(null) @@ -11,14 +11,53 @@ const Main = () => { const handleUploadClick = () => fileInputRef.current?.click() + function loadImage(file: File): Promise { + return new Promise((resolve) => { + const img = new Image() + img.onload = () => resolve(img) + img.src = URL.createObjectURL(file) + }) + } + + const resizeImage = async(file: File, maxWidth = 224): Promise => { + const img = await loadImage(file) + if (img.width <= maxWidth) { + return file + } + + const canvas = document.createElement('canvas') + const ratio = maxWidth / img.width + canvas.width = maxWidth + canvas.height = Math.round(img.height * ratio) + + const ctx = canvas.getContext('2d') as CanvasRenderingContext2D + ctx.imageSmoothingEnabled = true + ctx.imageSmoothingQuality = 'high' + ctx.drawImage(img, 0, 0, canvas.width, canvas.height) + + return new Promise((resolve) => { + canvas.toBlob((blob: Blob | null) => { + if (!blob) { + resolve(file) + return + } + resolve(new File([blob], file.name, { type: file.type })) + }, file.type, 0.9) + }) + } + const handleFileChange = (e: Event) => { console.log('handleFileChange') const target = e.target as HTMLInputElement const file = target.files?.[0] if (file) { + console.log('文件大小:', file.size / 1024) + const reader = new FileReader() reader.onload = async function() { - const arrayBuffer = reader.result as ArrayBuffer + const processedFile = await resizeImage(file, 224) + + const arrayBuffer = await processedFile.arrayBuffer() const uint8Array = new Uint8Array(arrayBuffer) const result = await (window as any).go.main.App.UploadImage( @@ -94,7 +133,7 @@ const Main = () => { > {fileSrc.length > 0 && step == 1 ?
- + @@ -147,13 +186,13 @@ const Main = () => {
- +

完成！

- +

{detectResult?.name}

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index 3eac2b3..e53a664 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -1,23 +1,35 @@ -export const Navbar = () => { +const Navbar = () => { const svgPath = "M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-4.5 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm9 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-9.5 3.5c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5zm11 0c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5zM12 18c-2.21 0-4 1.79-4 4h8c0-2.21-1.79-4-4-4z" const handleClick = () => window.open('https://git.leonstack.com/owner/Collage-Images', '_blank') + const handleNavColor = (e: Event) => { + const current = e.currentTarget as HTMLElement + const parent = current.parentElement + if (parent) { + parent.querySelectorAll('a').forEach(a => a.classList.remove('active')) + } + + current.classList.add('active') + } + return ( -