From 0cc685976448da7447ef73c594c6cdd04a31d983 Mon Sep 17 00:00:00 2001 From: Sudhananda Biswas Date: Wed, 21 Jan 2026 04:01:14 +0600 Subject: [PATCH 1/2] base64 - byteCode - image --- apps/web/src/App.tsx | 2 + apps/web/src/components/Layout.tsx | 3 +- apps/web/src/pages/ImageConverterPage.tsx | 193 ++++++++++++++++++++++ packages/core/dist/image-utils.d.ts | 23 +++ packages/core/dist/image-utils.js | 60 +++++++ packages/core/dist/index.d.ts | 1 + packages/core/dist/index.js | 1 + packages/core/src/image-utils.ts | 63 +++++++ packages/core/src/index.ts | 1 + 9 files changed, 346 insertions(+), 1 deletion(-) create mode 100644 apps/web/src/pages/ImageConverterPage.tsx create mode 100644 packages/core/dist/image-utils.d.ts create mode 100644 packages/core/dist/image-utils.js create mode 100644 packages/core/src/image-utils.ts diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 9abd140..045199c 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -4,6 +4,7 @@ import FormatterPage from './pages/FormatterPage'; import DiffPage from './pages/DiffPage'; import JSONParserPage from './pages/JSONParserPage'; import UnitConversionPage from './pages/UnitConversionPage'; +import ImageConverterPage from './pages/ImageConverterPage'; function App() { return ( @@ -15,6 +16,7 @@ function App() { } /> } /> } /> + } /> diff --git a/apps/web/src/components/Layout.tsx b/apps/web/src/components/Layout.tsx index 070044e..7ef9b34 100644 --- a/apps/web/src/components/Layout.tsx +++ b/apps/web/src/components/Layout.tsx @@ -1,5 +1,5 @@ import { Link, Outlet, useLocation } from 'react-router-dom'; -import { FileJson, ArrowLeftRight, Code2, Braces, Ruler } from 'lucide-react'; +import { FileJson, ArrowLeftRight, Code2, Braces, Ruler, Image } from 'lucide-react'; export default function Layout() { const location = useLocation(); @@ -9,6 +9,7 @@ export default function Layout() { { path: '/parser', label: 'JSON Parser', icon: Braces }, { path: '/diff', label: 'Diff Viewer', icon: ArrowLeftRight }, { path: '/unit-conversion', label: 'Unit Converter', icon: Ruler }, + { path: '/image-converter', label: 'Image Converter', icon: Image }, ]; return ( diff --git a/apps/web/src/pages/ImageConverterPage.tsx b/apps/web/src/pages/ImageConverterPage.tsx new file mode 100644 index 0000000..792fa6e --- /dev/null +++ b/apps/web/src/pages/ImageConverterPage.tsx @@ -0,0 +1,193 @@ +import React, { useState } from 'react'; +import { Image as ImageIcon, Copy, Upload, Trash2, FileCode, Binary } from 'lucide-react'; +import { + fileToDataUrl, + dataUrlToBase64, + base64ToByteCode, + byteCodeToBase64, + base64ToDataUrl +} from '@dev-assistant/core'; + +export default function ImageConverterPage() { + const [previewUrl, setPreviewUrl] = useState(''); + const [base64Value, setBase64Value] = useState(''); + const [byteCodeValue, setByteCodeValue] = useState(''); + const [mimeType, setMimeType] = useState('image/png'); + const [fileName, setFileName] = useState(''); + const [fileSize, setFileSize] = useState(0); + + const handleFileChange = async (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + + setFileName(file.name); + setFileSize(file.size); + setMimeType(file.type); + + try { + const dataUrl = await fileToDataUrl(file); + setPreviewUrl(dataUrl); + const base64 = dataUrlToBase64(dataUrl); + setBase64Value(base64); + setByteCodeValue(base64ToByteCode(base64)); + } catch (error) { + console.error('Failed to process image', error); + } + }; + + const handleBase64Change = (e: React.ChangeEvent) => { + const val = e.target.value; + setBase64Value(val); + setByteCodeValue(base64ToByteCode(val)); + setPreviewUrl(base64ToDataUrl(val, mimeType)); + }; + + const handleByteCodeChange = (e: React.ChangeEvent) => { + const val = e.target.value; + setByteCodeValue(val); + const base64 = byteCodeToBase64(val); + setBase64Value(base64); + setPreviewUrl(base64ToDataUrl(base64, mimeType)); + }; + + const copyToClipboard = (text: string) => { + navigator.clipboard.writeText(text); + }; + + const clear = () => { + setPreviewUrl(''); + setBase64Value(''); + setByteCodeValue(''); + setFileName(''); + setFileSize(0); + }; + + const formatSize = (bytes: number) => { + if (bytes === 0) return '0 Bytes'; + const k = 1024; + const sizes = ['Bytes', 'KB', 'MB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; + }; + + return ( +
+
+

Image Converter

+

+ Convert images to Base64/ByteCode and vice-versa. +

+
+ +
+ {/* Upload & Preview Section */} +
+
+
+

+ + Image Preview +

+ {previewUrl && ( + + )} +
+ + {!previewUrl ? ( + + ) : ( +
+
+ Preview +
+
+
+ Name: {fileName} +
+
+ Type: {mimeType} +
+
+ Size: {formatSize(fileSize)} +
+
+
+ )} +
+
+ + {/* Conversion Section */} +
+ {/* Base64 Output */} +
+
+

+ + Base64 String +

+ +
+