Last 10 Commits for enhance-mri3.scroll.pub

commit 20ac22b4fad6ececbb666c96b528ce1368b90adb Author: root <root@hub.scroll.pub> Date: 2025-01-13 18:05:40 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..a49edb0 --- /dev/null +++ b/body.html @@ -0,0 +1,59 @@ +<header> + <nav> + <h1>MRI Enhancement Lab</h1> + </nav> +</header> + +<main> + <section class="hero"> + <h2>Enhance Your MRI Images</h2> + <p>Advanced AI-powered image quality enhancement for medical imaging</p> + </section> + + <section class="upload-section"> + <div class="upload-container"> + <div class="upload-box" id="dropZone"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='64' height='64'%3E%3Cpath fill='%236c63ff' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E" alt="Upload icon"> + <h3>Drop your NII file here</h3> + <p>or</p> + <label class="upload-button" for="fileInput">Choose File</label> + <input type="file" id="fileInput" accept=".nii,.nii.gz" hidden> + </div> + </div> + + <div class="model-selection"> + <h3>Select Enhancement Model</h3> + <div class="model-grid"> + <div class="model-card" data-model="super-res"> + <h4>Super Resolution</h4> + <p>2x resolution enhancement</p> + </div> + <div class="model-card" data-model="denoise"> + <h4>Denoising</h4> + <p>Reduce image noise</p> + </div> + <div class="model-card" data-model="contrast"> + <h4>Contrast Enhancement</h4> + <p>Improve tissue contrast</p> + </div> + </div> + </div> + + <div class="preview-section" hidden> + <div class="preview-container"> + <div class="preview-original"> + <h4>Original</h4> + <div class="preview-image"></div> + </div> + <div class="preview-enhanced"> + <h4>Enhanced</h4> + <div class="preview-image"></div> + </div> + </div> + </div> + </section> +</main> + +<footer> + <p>Created by the MRI Enhancement Lab Team</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..fc94091 --- /dev/null +++ b/index.scroll @@ -0,0 +1,10 @@ +buildHtml +baseUrl https://enhance-mri.scroll.pub +metaTags + description "Advanced MRI Image Enhancement Tool - Upload and enhance your medical imaging with AI" + keywords "MRI enhancement, medical imaging AI, image quality improvement, neuroimaging" +editButton /edit.html +title MRI Enhancement Lab +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..462de5c --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01VLH4Dt41ALzoKjkFipiQo4", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a modern, interactive web app for MRI image enhancement. For the domain, I suggest:\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 Tool - Upload and enhance your medical imaging with AI\"\n keywords \"MRI enhancement, medical imaging AI, image quality improvement, neuroimaging\"\neditButton /edit.html\ntitle MRI Enhancement Lab\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <h1>MRI Enhancement Lab</h1>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h2>Enhance Your MRI Images</h2>\n <p>Advanced AI-powered image quality enhancement for medical imaging</p>\n </section>\n\n <section class=\"upload-section\">\n <div class=\"upload-container\">\n <div class=\"upload-box\" id=\"dropZone\">\n <img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='64' height='64'%3E%3Cpath fill='%236c63ff' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E\" alt=\"Upload icon\">\n <h3>Drop your NII file here</h3>\n <p>or</p>\n <label class=\"upload-button\" for=\"fileInput\">Choose File</label>\n <input type=\"file\" id=\"fileInput\" accept=\".nii,.nii.gz\" hidden>\n </div>\n </div>\n\n <div class=\"model-selection\">\n <h3>Select Enhancement Model</h3>\n <div class=\"model-grid\">\n <div class=\"model-card\" data-model=\"super-res\">\n <h4>Super Resolution</h4>\n <p>2x resolution enhancement</p>\n </div>\n <div class=\"model-card\" data-model=\"denoise\">\n <h4>Denoising</h4>\n <p>Reduce image noise</p>\n </div>\n <div class=\"model-card\" data-model=\"contrast\">\n <h4>Contrast Enhancement</h4>\n <p>Improve tissue contrast</p>\n </div>\n </div>\n </div>\n\n <div class=\"preview-section\" hidden>\n <div class=\"preview-container\">\n <div class=\"preview-original\">\n <h4>Original</h4>\n <div class=\"preview-image\"></div>\n </div>\n <div class=\"preview-enhanced\">\n <h4>Enhanced</h4>\n <div class=\"preview-image\"></div>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Created by the MRI Enhancement Lab Team</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #6c63ff;\n --secondary: #4CAF50;\n --accent: #ff6b6b;\n --background: #f8f9fa;\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 line-height: 1.6;\n color: var(--text);\n background: var(--background);\n}\n\nheader {\n background: linear-gradient(135deg, var(--primary), #8b80ff);\n padding: 1rem;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nheader h1 {\n color: white;\n font-size: 1.8rem;\n text-align: center;\n}\n\n.hero {\n text-align: center;\n padding: 3rem 1rem;\n background: linear-gradient(rgba(108, 99, 255, 0.05), rgba(108, 99, 255, 0.1));\n}\n\n.hero h2 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(135deg, var(--primary), var(--accent));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.upload-section {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.upload-container {\n margin-bottom: 2rem;\n}\n\n.upload-box {\n border: 3px dashed var(--primary);\n border-radius: 20px;\n padding: 2rem;\n text-align: center;\n background: white;\n transition: all 0.3s ease;\n cursor: pointer;\n}\n\n.upload-box:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(108, 99, 255, 0.1);\n}\n\n.upload-button {\n display: inline-block;\n background: var(--primary);\n color: white;\n padding: 0.8rem 1.5rem;\n border-radius: 25px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.upload-button:hover {\n background: #5549ff;\n transform: scale(1.05);\n}\n\n.model-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin-top: 1.5rem;\n}\n\n.model-card {\n background: white;\n padding: 1.5rem;\n border-radius: 15px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.model-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(108, 99, 255, 0.1);\n}\n\n.model-card.selected {\n border: 2px solid var(--primary);\n}\n\n.preview-section {\n margin-top: 2rem;\n}\n\n.preview-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n padding: 1rem;\n}\n\n.preview-image {\n background: white;\n border-radius: 10px;\n height: 300px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: white;\n margin-top: 3rem;\n}\n\n@media (max-width: 768px) {\n .preview-container {\n grid-template-columns: 1fr;\n }\n \n .hero h2 {\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 modelCards = document.querySelectorAll('.model-card');\n const previewSection = document.querySelector('.preview-section');\n\n // Drag and drop handlers\n dropZone.addEventListener('dragover', (e) => {\n e.preventDefault();\n dropZone.style.backgroundColor = '#f0f0ff';\n });\n\n dropZone.addEventListener('dragleave', (e) => {\n e.preventDefault();\n dropZone.style.backgroundColor = 'white';\n });\n\n dropZone.addEventListener('drop', (e) => {\n e.preventDefault();\n dropZone.style.backgroundColor = 'white';\n const files = e.dataTransfer.files;\n handleFiles(files);\n });\n\n dropZone.addEventListener('click', () => {\n fileInput.click();\n });\n\n fileInput.addEventListener('change', (e) => {\n handleFiles(e.target.files);\n });\n\n // Model selection\n modelCards.forEach(card => {\n card.addEventListener('click', () => {\n modelCards.forEach(c => c.classList.remove('selected'));\n card.classList.add('selected');\n if (fileInput.files.length > 0) {\n previewSection.hidden = false;\n }\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 NIfTI file (.nii or .nii.gz)');\n return;\n }\n\n // Show preview section if model is selected\n if (document.querySelector('.model-card.selected')) {\n previewSection.hidden = false;\n }\n\n // Simulate processing\n const loadingMessage = document.createElement('div');\n loadingMessage.textContent = 'Processing...';\n loadingMessage.style.color = var(--primary);\n dropZone.appendChild(loadingMessage);\n\n setTimeout(() => {\n loadingMessage.remove();\n alert('File processed successfully! (Demo purposes only)');\n }, 2000);\n }\n});\n\n---end---\n\nThis web app features:\n1. Modern gradient-based design with smooth animations\n2. Drag-and-drop file upload with visual feedback\n3. Interactive model selection cards\n4. Before/after preview section\n5. Fully responsive layout\n6. Accessible semantic HTML\n7. Beautiful color scheme and typography\n8. Smooth hover effects and transitions\n9. Error handling for file types\n10. Loading state simulation\n\nThe design is clean, professional, and engaging while maintaining simplicity and usability. The color scheme is modern and appealing, with a focus on the primary purple/blue gradient that gives it a high-tech medical feel." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 318, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2639 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..8895490 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# enhance-mri3.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 (colorful). Be creative. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..6675e8b --- /dev/null +++ b/script.js @@ -0,0 +1,69 @@ +document.addEventListener('DOMContentLoaded', () => { + const dropZone = document.getElementById('dropZone'); + const fileInput = document.getElementById('fileInput'); + const modelCards = document.querySelectorAll('.model-card'); + const previewSection = document.querySelector('.preview-section'); + + // Drag and drop handlers + dropZone.addEventListener('dragover', (e) => { + e.preventDefault(); + dropZone.style.backgroundColor = '#f0f0ff'; + }); + + dropZone.addEventListener('dragleave', (e) => { + e.preventDefault(); + dropZone.style.backgroundColor = 'white'; + }); + + dropZone.addEventListener('drop', (e) => { + e.preventDefault(); + dropZone.style.backgroundColor = 'white'; + const files = e.dataTransfer.files; + handleFiles(files); + }); + + dropZone.addEventListener('click', () => { + fileInput.click(); + }); + + fileInput.addEventListener('change', (e) => { + handleFiles(e.target.files); + }); + + // Model selection + modelCards.forEach(card => { + card.addEventListener('click', () => { + modelCards.forEach(c => c.classList.remove('selected')); + card.classList.add('selected'); + if (fileInput.files.length > 0) { + previewSection.hidden = false; + } + }); + }); + + 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 NIfTI file (.nii or .nii.gz)'); + return; + } + + // Show preview section if model is selected + if (document.querySelector('.model-card.selected')) { + previewSection.hidden = false; + } + + // Simulate processing + const loadingMessage = document.createElement('div'); + loadingMessage.textContent = 'Processing...'; + loadingMessage.style.color = var(--primary); + dropZone.appendChild(loadingMessage); + + setTimeout(() => { + loadingMessage.remove(); + alert('File processed successfully! (Demo purposes only)'); + }, 2000); + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..7bb9001 --- /dev/null +++ b/style.css @@ -0,0 +1,146 @@ +:root { + --primary: #6c63ff; + --secondary: #4CAF50; + --accent: #ff6b6b; + --background: #f8f9fa; + --text: #2d3436; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + line-height: 1.6; + color: var(--text); + background: var(--background); +} + +header { + background: linear-gradient(135deg, var(--primary), #8b80ff); + padding: 1rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +header h1 { + color: white; + font-size: 1.8rem; + text-align: center; +} + +.hero { + text-align: center; + padding: 3rem 1rem; + background: linear-gradient(rgba(108, 99, 255, 0.05), rgba(108, 99, 255, 0.1)); +} + +.hero h2 { + font-size: 2.5rem; + margin-bottom: 1rem; + background: linear-gradient(135deg, var(--primary), var(--accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.upload-section { + max-width: 1200px; + margin: 2rem auto; + padding: 0 1rem; +} + +.upload-container { + margin-bottom: 2rem; +} + +.upload-box { + border: 3px dashed var(--primary); + border-radius: 20px; + padding: 2rem; + text-align: center; + background: white; + transition: all 0.3s ease; + cursor: pointer; +} + +.upload-box:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(108, 99, 255, 0.1); +} + +.upload-button { + display: inline-block; + background: var(--primary); + color: white; + padding: 0.8rem 1.5rem; + border-radius: 25px; + cursor: pointer; + transition: all 0.3s ease; +} + +.upload-button:hover { + background: #5549ff; + transform: scale(1.05); +} + +.model-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; + margin-top: 1.5rem; +} + +.model-card { + background: white; + padding: 1.5rem; + border-radius: 15px; + box-shadow: 0 5px 15px rgba(0,0,0,0.05); + cursor: pointer; + transition: all 0.3s ease; +} + +.model-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(108, 99, 255, 0.1); +} + +.model-card.selected { + border: 2px solid var(--primary); +} + +.preview-section { + margin-top: 2rem; +} + +.preview-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + padding: 1rem; +} + +.preview-image { + background: white; + border-radius: 10px; + height: 300px; + box-shadow: 0 5px 15px rgba(0,0,0,0.05); +} + +footer { + text-align: center; + padding: 2rem; + background: white; + margin-top: 3rem; +} + +@media (max-width: 768px) { + .preview-container { + grid-template-columns: 1fr; + } + + .hero h2 { + font-size: 2rem; + } +}