Last 10 Commits for enhance-mri2.scroll.pub

commit 173933cc16cc475e0f8edeb50c047189a41263fd Author: root <root@hub.scroll.pub> Date: 2025-01-13 18:04:26 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..0caf80e --- /dev/null +++ b/body.html @@ -0,0 +1,47 @@ +<header> + <nav> + <div class="logo">MRI Enhance</div> + </nav> +</header> + +<main> + <section class="hero"> + <h1>Enhance Your Medical Imaging</h1> + <p>Advanced AI-powered MRI image enhancement</p> + </section> + + <section class="upload-section"> + <div class="upload-container"> + <div class="upload-area" id="dropZone"> + <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMTZWNE0xMiA0TDggOE0xMiA0TDE2IDgiIHN0cm9rZT0iIzY2NiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=" alt="Upload icon"> + <h3>Drop your .nii file here</h3> + <p>or click to browse</p> + <input type="file" id="fileInput" accept=".nii,.nii.gz" hidden> + </div> + + <div class="model-selection"> + <h3>Select Enhancement Model</h3> + <div class="model-options"> + <button class="model-btn active" data-model="standard">Standard</button> + <button class="model-btn" data-model="high-res">High Resolution</button> + <button class="model-btn" data-model="noise-reduction">Noise Reduction</button> + </div> + </div> + </div> + + <div class="preview-container"> + <div class="preview-original"> + <h3>Original Image</h3> + <div class="image-preview" id="originalPreview"></div> + </div> + <div class="preview-enhanced"> + <h3>Enhanced Image</h3> + <div class="image-preview" id="enhancedPreview"></div> + </div> + </div> + </section> +</main> + +<footer> + <p>Built with advanced AI technology for medical imaging professionals</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..e2186c3 --- /dev/null +++ b/index.scroll @@ -0,0 +1,10 @@ +buildHtml +baseUrl https://enhance-mri.scroll.pub +metaTags + description "Advanced MRI Image Enhancement Web Application - Upload and enhance your medical imaging with AI models" + keywords "MRI enhancement, medical imaging, AI enhancement, image processing" +editButton /edit.html +title MRI Enhance - Advanced Medical Image Enhancement +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..630ab38 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01TqK1vbyGnomvwonP56HgQ6", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "Here's a modern webapp for MRI image enhancement:\n\n---domain---\nenhance-mri.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://enhance-mri.scroll.pub\nmetaTags\n description \"Advanced MRI Image Enhancement Web Application - Upload and enhance your medical imaging with AI models\"\n keywords \"MRI enhancement, medical imaging, AI enhancement, image processing\"\neditButton /edit.html\ntitle MRI Enhance - Advanced Medical Image Enhancement\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">MRI Enhance</div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Enhance Your Medical Imaging</h1>\n <p>Advanced AI-powered MRI image enhancement</p>\n </section>\n\n <section class=\"upload-section\">\n <div class=\"upload-container\">\n <div class=\"upload-area\" id=\"dropZone\">\n <img src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMTZWNE0xMiA0TDggOE0xMiA0TDE2IDgiIHN0cm9rZT0iIzY2NiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=\" alt=\"Upload icon\">\n <h3>Drop your .nii file here</h3>\n <p>or click to browse</p>\n <input type=\"file\" id=\"fileInput\" accept=\".nii,.nii.gz\" hidden>\n </div>\n\n <div class=\"model-selection\">\n <h3>Select Enhancement Model</h3>\n <div class=\"model-options\">\n <button class=\"model-btn active\" data-model=\"standard\">Standard</button>\n <button class=\"model-btn\" data-model=\"high-res\">High Resolution</button>\n <button class=\"model-btn\" data-model=\"noise-reduction\">Noise Reduction</button>\n </div>\n </div>\n </div>\n\n <div class=\"preview-container\">\n <div class=\"preview-original\">\n <h3>Original Image</h3>\n <div class=\"image-preview\" id=\"originalPreview\"></div>\n </div>\n <div class=\"preview-enhanced\">\n <h3>Enhanced Image</h3>\n <div class=\"image-preview\" id=\"enhancedPreview\"></div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Built with advanced AI technology for medical imaging professionals</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2D3436;\n --secondary: #0984E3;\n --accent: #74B9FF;\n --background: #F5F6FA;\n --text: #2D3436;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: var(--background);\n color: var(--text);\n line-height: 1.6;\n}\n\nheader {\n background: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n padding: 1rem 2rem;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--primary);\n}\n\n.hero {\n text-align: center;\n padding: 4rem 2rem;\n background: linear-gradient(135deg, var(--secondary), var(--accent));\n color: white;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.upload-section {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 2rem;\n}\n\n.upload-container {\n background: white;\n border-radius: 1rem;\n padding: 2rem;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.upload-area {\n border: 2px dashed #ddd;\n border-radius: 1rem;\n padding: 3rem;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.upload-area:hover {\n border-color: var(--secondary);\n background: rgba(9,132,227,0.05);\n}\n\n.upload-area img {\n width: 50px;\n margin-bottom: 1rem;\n}\n\n.model-selection {\n margin-top: 2rem;\n}\n\n.model-options {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.model-btn {\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 0.5rem;\n background: var(--background);\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.model-btn.active {\n background: var(--secondary);\n color: white;\n}\n\n.preview-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.image-preview {\n background: white;\n border-radius: 1rem;\n height: 300px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: white;\n margin-top: 4rem;\n}\n\n@media (max-width: 768px) {\n .preview-container {\n grid-template-columns: 1fr;\n }\n \n .model-options {\n flex-direction: column;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const dropZone = document.getElementById('dropZone');\n const fileInput = document.getElementById('fileInput');\n const modelBtns = document.querySelectorAll('.model-btn');\n\n // Handle drag and drop\n dropZone.addEventListener('dragover', (e) => {\n e.preventDefault();\n dropZone.style.borderColor = 'var(--secondary)';\n dropZone.style.background = 'rgba(9,132,227,0.05)';\n });\n\n dropZone.addEventListener('dragleave', (e) => {\n e.preventDefault();\n dropZone.style.borderColor = '#ddd';\n dropZone.style.background = 'white';\n });\n\n dropZone.addEventListener('drop', (e) => {\n e.preventDefault();\n dropZone.style.borderColor = '#ddd';\n dropZone.style.background = 'white';\n \n const files = e.dataTransfer.files;\n handleFiles(files);\n });\n\n // Handle click to upload\n dropZone.addEventListener('click', () => {\n fileInput.click();\n });\n\n fileInput.addEventListener('change', (e) => {\n handleFiles(e.target.files);\n });\n\n // Handle model selection\n modelBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n modelBtns.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n processImage();\n });\n });\n\n function handleFiles(files) {\n if (files.length === 0) return;\n \n const file = files[0];\n if (!file.name.endsWith('.nii') && !file.name.endsWith('.nii.gz')) {\n alert('Please upload a valid .nii or .nii.gz file');\n return;\n }\n\n // Here you would typically handle the file upload and processing\n // For demo purposes, we'll just show a success message\n const uploadArea = dropZone.querySelector('h3');\n uploadArea.textContent = 'File uploaded: ' + file.name;\n \n processImage();\n }\n\n function processImage() {\n const selectedModel = document.querySelector('.model-btn.active').dataset.model;\n // Here you would typically process the image with the selected model\n console.log(`Processing image with ${selectedModel} model...`);\n }\n});\n\n---end---\n\nThis implementation creates a modern, professional web application for MRI image enhancement. Key features include:\n\n1. Drag-and-drop file upload with .nii file validation\n2. Model selection interface with three options\n3. Preview areas for original and enhanced images\n4. Responsive design that works on mobile devices\n5. Modern gradient hero section\n6. Clean, accessible semantic HTML\n7. Smooth animations and transitions\n8. Professional color scheme\n9. Clear visual feedback for user interactions\n\nThe design is minimal yet sophisticated, with careful attention to spacing, typography, and visual hierarchy. The interface is intuitive and follows modern web design patterns." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 311, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2507 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..ee55db2 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# enhance-mri2.scroll.pub + +website generated by Claude from prompt: I want to create a webapp demo for mr image quality enhancement for my pitchdeck. I want to be able to upload nii image and select what model to use. Make it modern and pretty \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..6755a41 --- /dev/null +++ b/script.js @@ -0,0 +1,68 @@ +document.addEventListener('DOMContentLoaded', () => { + const dropZone = document.getElementById('dropZone'); + const fileInput = document.getElementById('fileInput'); + const modelBtns = document.querySelectorAll('.model-btn'); + + // Handle drag and drop + dropZone.addEventListener('dragover', (e) => { + e.preventDefault(); + dropZone.style.borderColor = 'var(--secondary)'; + dropZone.style.background = 'rgba(9,132,227,0.05)'; + }); + + dropZone.addEventListener('dragleave', (e) => { + e.preventDefault(); + dropZone.style.borderColor = '#ddd'; + dropZone.style.background = 'white'; + }); + + dropZone.addEventListener('drop', (e) => { + e.preventDefault(); + dropZone.style.borderColor = '#ddd'; + dropZone.style.background = 'white'; + + const files = e.dataTransfer.files; + handleFiles(files); + }); + + // Handle click to upload + dropZone.addEventListener('click', () => { + fileInput.click(); + }); + + fileInput.addEventListener('change', (e) => { + handleFiles(e.target.files); + }); + + // Handle model selection + modelBtns.forEach(btn => { + btn.addEventListener('click', () => { + modelBtns.forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + processImage(); + }); + }); + + function handleFiles(files) { + if (files.length === 0) return; + + const file = files[0]; + if (!file.name.endsWith('.nii') && !file.name.endsWith('.nii.gz')) { + alert('Please upload a valid .nii or .nii.gz file'); + return; + } + + // Here you would typically handle the file upload and processing + // For demo purposes, we'll just show a success message + const uploadArea = dropZone.querySelector('h3'); + uploadArea.textContent = 'File uploaded: ' + file.name; + + processImage(); + } + + function processImage() { + const selectedModel = document.querySelector('.model-btn.active').dataset.model; + // Here you would typically process the image with the selected model + console.log(`Processing image with ${selectedModel} model...`); + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..7d38729 --- /dev/null +++ b/style.css @@ -0,0 +1,135 @@ +:root { + --primary: #2D3436; + --secondary: #0984E3; + --accent: #74B9FF; + --background: #F5F6FA; + --text: #2D3436; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + background: var(--background); + color: var(--text); + line-height: 1.6; +} + +header { + background: white; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + padding: 1rem 2rem; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary); +} + +.hero { + text-align: center; + padding: 4rem 2rem; + background: linear-gradient(135deg, var(--secondary), var(--accent)); + color: white; +} + +.hero h1 { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.upload-section { + max-width: 1200px; + margin: 2rem auto; + padding: 0 2rem; +} + +.upload-container { + background: white; + border-radius: 1rem; + padding: 2rem; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); +} + +.upload-area { + border: 2px dashed #ddd; + border-radius: 1rem; + padding: 3rem; + text-align: center; + cursor: pointer; + transition: all 0.3s ease; +} + +.upload-area:hover { + border-color: var(--secondary); + background: rgba(9,132,227,0.05); +} + +.upload-area img { + width: 50px; + margin-bottom: 1rem; +} + +.model-selection { + margin-top: 2rem; +} + +.model-options { + display: flex; + gap: 1rem; + margin-top: 1rem; +} + +.model-btn { + padding: 0.8rem 1.5rem; + border: none; + border-radius: 0.5rem; + background: var(--background); + cursor: pointer; + transition: all 0.3s ease; +} + +.model-btn.active { + background: var(--secondary); + color: white; +} + +.preview-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + margin-top: 2rem; +} + +.image-preview { + background: white; + border-radius: 1rem; + height: 300px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); +} + +footer { + text-align: center; + padding: 2rem; + background: white; + margin-top: 4rem; +} + +@media (max-width: 768px) { + .preview-container { + grid-template-columns: 1fr; + } + + .model-options { + flex-direction: column; + } + + .hero h1 { + font-size: 2rem; + } +}