\n 📸 Drop or paste images to transcribe text\n

\n );\n }\n\n const currentImage = images[currentImageIndex];\n if (!currentImage) return null;\n\n const renderImageControls = () => {\n if (images.length <= 1) return null;\n\n return (\n \n \n ← Previous\n \n \n {currentImageIndex + 1} of {images.length}\n \n \n Next →\n \n \n );\n };\n\n const renderImageStatus = () => {\n switch (currentImage.status) {\n case \"uploading\":\n return (\n

\n ⏳ Uploading image...\n

\n );\n\n case \"processing\":\n return (\n

\n \n \n \n \n

{transcriptionMessages[currentMessageIndex]}

\n \n This usually takes around 30 seconds\n

\n \n \n \n \n );\n\n case \"completed\":\n return (\n

\n \n \n {currentImage.file.name}\n

\n \n \n \n 📋 Copy This\n \n {images.filter((img) => img.status === \"completed\").length >\n 1 && (\n \n 📋 Copy All (\n {images.filter((img) => img.status === \"completed\").length})\n \n )}\n \n \n );\n\n case \"error\":\n return (\n

\n \n \n {currentImage.file.name}\n

\n ❌ {currentImage.error || \"Transcription failed\"}\n

\n {\n setImages((prev) =>\n prev.filter((img) => img.id !== currentImage.id)\n );\n setCurrentImageIndex((prev) =>\n Math.max(0, Math.min(prev, images.length - 2))\n );\n }}\n style={{\n marginTop: \"10px\",\n padding: \"8px 16px\",\n backgroundColor: \"#dc3545\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontSize: \"14px\",\n }}\n >\n ❌ Remove This Image\n \n \n );\n\n default:\n return null;\n }\n };\n\n return (\n

\n {renderImageControls()}\n {renderImageStatus()}\n

\n );\n };\n\n return (\n \n

📸 TranscribeThing

\n Upload an image to transcribe your notes to Markdown\n

\n\n {\n e.preventDefault();\n const files = Array.from(e.dataTransfer.files);\n if (files.length > 0) handleImageUpload(files);\n }}\n onDragOver={(e) => e.preventDefault()}\n onDragEnter={(e) => e.preventDefault()}\n contentEditable\n tabIndex={0}\n style={{\n border: images.length === 0 ? \"2px dashed #ccc\" : \"2px solid #007cba\",\n minHeight: \"200px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n marginBottom: \"15px\",\n outline: \"none\",\n cursor: images.length === 0 ? \"pointer\" : \"default\",\n borderRadius: \"8px\",\n padding: \"20px\",\n backgroundColor: images.length === 0 ? \"#fafafa\" : \"#fff\",\n }}\n >\n {renderContent()}\n \n\n \n\n \n\n {/* Add new images button when we already have images */}\n {images.length > 0 && (\n

\n \n ➕ Add More Images\n \n \n 🔄 Start Over\n \n

\n )}\n\n {images.length === 0 && (\n \n 📂 Click to browse, paste from clipboard, or drag & drop images here\n \n )}\n\n {toastMessage && (\n \n {toastMessage}\n \n )}\n\n {/* Cached Transcriptions Section */}\n {cachedTranscriptions.length > 0 && (\n \n \n 📚 Recent Transcriptions\n \n \n {cachedTranscriptions.slice(0, 5).map((cached) => (\n \n \n

\n \n {new Date(cached.timestamp).toLocaleString()}\n

\n \n {cached.transcription}\n \n \n copyToClipboard(\n cached.transcription,\n \"Cached transcription copied!\"\n )\n }\n style={{\n marginTop: \"8px\",\n padding: \"4px 8px\",\n backgroundColor: \"#6c757d\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"3px\",\n cursor: \"pointer\",\n fontSize: \"12px\",\n }}\n >\n 📋 Copy\n \n \n \n ))}\n \n \n )}\n\n \n - or,\n \n \n \n use the CLI!\n \n \n \n \n {`# Install the CLI\n❯ deno install -grAf -n=tt \\\\\n https://esm.town/v/apsv/TranscribeThing/cli/cli.ts\n\n# Use it\n❯ tt transcribe image.jpg`}\n \n \n \n \n \n );\n}\n","deleted","label",[172,173,153],"frontend","components","permalink","https://www.val.town/x/apsv/TranscribeThing/code/frontend/components/ImageTranscriber.tsx","extension","actionData","errors"]