commit 60724886a64cabaa7be9936dd425e9e1a015c041
Author: root <root@hub.scroll.pub>
Date: 2025-01-13 18:02:59 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..9362e82
--- /dev/null
+++ b/body.html
@@ -0,0 +1,50 @@
+<header>
+ <h1>MRI Enhancement Studio</h1>
+ <p class="tagline">Advanced AI-powered medical image enhancement</p>
+</header>
+
+<main>
+ <section class="upload-section">
+ <div class="drop-zone" id="dropZone">
+ <i class="icon">⬆️</i>
+ <p>Drag & drop your NII file here<br>or click to browse</p>
+ <input type="file" id="fileInput" accept=".nii,.nii.gz" hidden>
+ </div>
+ </section>
+
+ <section class="model-section">
+ <h2>Enhancement Model</h2>
+ <div class="model-grid">
+ <div class="model-card" data-model="superres">
+ <h3>Super Resolution</h3>
+ <p>4x resolution enhancement</p>
+ </div>
+ <div class="model-card" data-model="denoise">
+ <h3>Denoising</h3>
+ <p>Advanced noise reduction</p>
+ </div>
+ <div class="model-card" data-model="contrast">
+ <h3>Contrast Enhancement</h3>
+ <p>Improved tissue contrast</p>
+ </div>
+ </div>
+ </section>
+
+ <section class="preview-section">
+ <div class="preview-container">
+ <div class="preview original">
+ <h3>Original</h3>
+ <div class="image-preview" id="originalPreview"></div>
+ </div>
+ <div class="preview enhanced">
+ <h3>Enhanced</h3>
+ <div class="image-preview" id="enhancedPreview"></div>
+ </div>
+ </div>
+ <button class="process-btn" id="processBtn" disabled>Process Image</button>
+ </section>
+</main>
+
+<footer>
+ <p>Built with care for medical professionals</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..2205bc9
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://enhance-mri.scroll.pub
+metaTags
+ description Advanced MRI Image Enhancement Demo - Upload and enhance your medical imaging data
+ keywords MRI enhancement, image quality, medical imaging, AI models
+editButton /edit.html
+title MRI Enhancement Studio
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..cc2db4f
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01AvzRb5VLaYhsLNXmszdVLW",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a website implementation for your MR image enhancement demo:\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 Demo - Upload and enhance your medical imaging data\n keywords MRI enhancement, image quality, medical imaging, AI models\neditButton /edit.html\ntitle MRI Enhancement Studio\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>MRI Enhancement Studio</h1>\n <p class=\"tagline\">Advanced AI-powered medical image enhancement</p>\n</header>\n\n<main>\n <section class=\"upload-section\">\n <div class=\"drop-zone\" id=\"dropZone\">\n <i class=\"icon\">⬆️</i>\n <p>Drag & drop your NII file here<br>or click to browse</p>\n <input type=\"file\" id=\"fileInput\" accept=\".nii,.nii.gz\" hidden>\n </div>\n </section>\n\n <section class=\"model-section\">\n <h2>Enhancement Model</h2>\n <div class=\"model-grid\">\n <div class=\"model-card\" data-model=\"superres\">\n <h3>Super Resolution</h3>\n <p>4x resolution enhancement</p>\n </div>\n <div class=\"model-card\" data-model=\"denoise\">\n <h3>Denoising</h3>\n <p>Advanced noise reduction</p>\n </div>\n <div class=\"model-card\" data-model=\"contrast\">\n <h3>Contrast Enhancement</h3>\n <p>Improved tissue contrast</p>\n </div>\n </div>\n </section>\n\n <section class=\"preview-section\">\n <div class=\"preview-container\">\n <div class=\"preview original\">\n <h3>Original</h3>\n <div class=\"image-preview\" id=\"originalPreview\"></div>\n </div>\n <div class=\"preview enhanced\">\n <h3>Enhanced</h3>\n <div class=\"image-preview\" id=\"enhancedPreview\"></div>\n </div>\n </div>\n <button class=\"process-btn\" id=\"processBtn\" disabled>Process Image</button>\n </section>\n</main>\n\n<footer>\n <p>Built with care for medical professionals</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a6bb8;\n --secondary: #1d4d8a;\n --bg: #f5f7fa;\n --text: #2c3e50;\n --radius: 12px;\n --shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--bg);\n color: var(--text);\n line-height: 1.6;\n}\n\nheader {\n text-align: center;\n padding: 3rem 1rem;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\nmain {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.drop-zone {\n border: 3px dashed #ccd;\n border-radius: var(--radius);\n padding: 3rem;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n background: white;\n}\n\n.drop-zone:hover {\n border-color: var(--primary);\n background: #f8f9ff;\n}\n\n.icon {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.model-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin: 2rem 0;\n}\n\n.model-card {\n background: white;\n padding: 1.5rem;\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.model-card:hover {\n transform: translateY(-3px);\n}\n\n.preview-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin: 2rem 0;\n}\n\n.preview {\n background: white;\n padding: 1rem;\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n}\n\n.image-preview {\n width: 100%;\n height: 300px;\n background: #f0f2f5;\n border-radius: calc(var(--radius) - 4px);\n margin-top: 1rem;\n}\n\n.process-btn {\n background: var(--primary);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: var(--radius);\n font-size: 1.1rem;\n cursor: pointer;\n width: 100%;\n max-width: 300px;\n margin: 2rem auto;\n display: block;\n transition: background 0.3s ease;\n}\n\n.process-btn:disabled {\n background: #ccc;\n cursor: not-allowed;\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 h1 {\n font-size: 2rem;\n }\n \n main {\n padding: 1rem;\n }\n \n .model-grid {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const dropZone = document.getElementById('dropZone');\n const fileInput = document.getElementById('fileInput');\n const processBtn = document.getElementById('processBtn');\n const modelCards = document.querySelectorAll('.model-card');\n \n let selectedFile = null;\n let selectedModel = null;\n\n // File upload handling\n dropZone.addEventListener('click', () => fileInput.click());\n \n dropZone.addEventListener('dragover', (e) => {\n e.preventDefault();\n dropZone.style.borderColor = var(--primary);\n });\n \n dropZone.addEventListener('dragleave', () => {\n dropZone.style.borderColor = '#ccd';\n });\n \n dropZone.addEventListener('drop', (e) => {\n e.preventDefault();\n const file = e.dataTransfer.files[0];\n handleFile(file);\n });\n \n fileInput.addEventListener('change', (e) => {\n const file = e.target.files[0];\n handleFile(file);\n });\n\n // Model selection\n modelCards.forEach(card => {\n card.addEventListener('click', () => {\n modelCards.forEach(c => c.style.border = 'none');\n card.style.border = `2px solid var(--primary)`;\n selectedModel = card.dataset.model;\n updateProcessButton();\n });\n });\n\n function handleFile(file) {\n if (file && (file.name.endsWith('.nii') || file.name.endsWith('.nii.gz'))) {\n selectedFile = file;\n dropZone.innerHTML = `<p>Selected: ${file.name}</p>`;\n updateProcessButton();\n } else {\n alert('Please upload a valid NII file');\n }\n }\n\n function updateProcessButton() {\n processBtn.disabled = !(selectedFile && selectedModel);\n }\n\n processBtn.addEventListener('click', () => {\n // Here you would implement the actual processing logic\n alert(`Processing ${selectedFile.name} with ${selectedModel} model`);\n });\n});\n\n---end---\n\nThis implementation creates a professional and modern web application for MRI image enhancement. Key features include:\n\n1. Drag & drop file upload with NII file validation\n2. Visual model selection cards\n3. Preview areas for original and enhanced images\n4. Responsive design that works on all devices\n5. Modern gradient header and clean UI\n6. Accessible semantic HTML structure\n7. Interactive hover and click effects\n8. Professional animations and transitions\n9. Clear visual feedback for user actions\n\nThe design uses a medical-professional color scheme with blues and clean whites, maintaining a professional appearance while being visually appealing. The layout is intuitive and guides users through the process of uploading and enhancing their images."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 306,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2312
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..9bbc145
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# enhance-mri1.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.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..22ae17a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const dropZone = document.getElementById('dropZone');
+ const fileInput = document.getElementById('fileInput');
+ const processBtn = document.getElementById('processBtn');
+ const modelCards = document.querySelectorAll('.model-card');
+
+ let selectedFile = null;
+ let selectedModel = null;
+
+ // File upload handling
+ dropZone.addEventListener('click', () => fileInput.click());
+
+ dropZone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ dropZone.style.borderColor = var(--primary);
+ });
+
+ dropZone.addEventListener('dragleave', () => {
+ dropZone.style.borderColor = '#ccd';
+ });
+
+ dropZone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ const file = e.dataTransfer.files[0];
+ handleFile(file);
+ });
+
+ fileInput.addEventListener('change', (e) => {
+ const file = e.target.files[0];
+ handleFile(file);
+ });
+
+ // Model selection
+ modelCards.forEach(card => {
+ card.addEventListener('click', () => {
+ modelCards.forEach(c => c.style.border = 'none');
+ card.style.border = `2px solid var(--primary)`;
+ selectedModel = card.dataset.model;
+ updateProcessButton();
+ });
+ });
+
+ function handleFile(file) {
+ if (file && (file.name.endsWith('.nii') || file.name.endsWith('.nii.gz'))) {
+ selectedFile = file;
+ dropZone.innerHTML = `<p>Selected: ${file.name}</p>`;
+ updateProcessButton();
+ } else {
+ alert('Please upload a valid NII file');
+ }
+ }
+
+ function updateProcessButton() {
+ processBtn.disabled = !(selectedFile && selectedModel);
+ }
+
+ processBtn.addEventListener('click', () => {
+ // Here you would implement the actual processing logic
+ alert(`Processing ${selectedFile.name} with ${selectedModel} model`);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..55c6d23
--- /dev/null
+++ b/style.css
@@ -0,0 +1,147 @@
+:root {
+ --primary: #2a6bb8;
+ --secondary: #1d4d8a;
+ --bg: #f5f7fa;
+ --text: #2c3e50;
+ --radius: 12px;
+ --shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ line-height: 1.6;
+}
+
+header {
+ text-align: center;
+ padding: 3rem 1rem;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: white;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+}
+
+main {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.drop-zone {
+ border: 3px dashed #ccd;
+ border-radius: var(--radius);
+ padding: 3rem;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ background: white;
+}
+
+.drop-zone:hover {
+ border-color: var(--primary);
+ background: #f8f9ff;
+}
+
+.icon {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.model-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+ margin: 2rem 0;
+}
+
+.model-card {
+ background: white;
+ padding: 1.5rem;
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ cursor: pointer;
+ transition: transform 0.2s ease;
+}
+
+.model-card:hover {
+ transform: translateY(-3px);
+}
+
+.preview-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin: 2rem 0;
+}
+
+.preview {
+ background: white;
+ padding: 1rem;
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+}
+
+.image-preview {
+ width: 100%;
+ height: 300px;
+ background: #f0f2f5;
+ border-radius: calc(var(--radius) - 4px);
+ margin-top: 1rem;
+}
+
+.process-btn {
+ background: var(--primary);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: var(--radius);
+ font-size: 1.1rem;
+ cursor: pointer;
+ width: 100%;
+ max-width: 300px;
+ margin: 2rem auto;
+ display: block;
+ transition: background 0.3s ease;
+}
+
+.process-btn:disabled {
+ background: #ccc;
+ cursor: not-allowed;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: white;
+ margin-top: 3rem;
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ main {
+ padding: 1rem;
+ }
+
+ .model-grid {
+ grid-template-columns: 1fr;
+ }
+}