Changes to mrienhance.scroll.pub

root
root
8 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+ Upload
+ Models
+ About
+
+
+
+
+
+
+

Advanced MRI Image Enhancement

+

Transform and enhance your neuroimaging data with AI-powered solutions

+
+
+
+

Upload Images

+
+
+
+
+
+

No file selected

+
+
+
+
+
+
+
+

No file selected

+
+
+
+
+
+

Select Enhancement Model

+
+
+
+
+ Process Images
+
+
+
+

Results

+
+
+

Results will appear here

+
+
+
+
+
+
+
+

MRI Enhancement Suite | Advanced Neuroimaging Tools

+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://mrienhance.scroll.pub
+ metaTags
+ editButton /edit.html
+ title MRI Enhancement Suite
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01FK4rjhnmSg8YopgpTjXLfP",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a professional webapp for MRI image enhancement. For the domain, I suggest:\n\n---domain---\nmrienhance.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://mrienhance.scroll.pub\nmetaTags\neditButton /edit.html\ntitle MRI Enhancement Suite\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
\n \n
\n\n
\n
\n

Advanced MRI Image Enhancement

\n

Transform and enhance your neuroimaging data with AI-powered solutions

\n
\n\n
\n

Upload Images

\n
\n
\n \n \n
\n

No file selected

\n
\n
\n \n
\n \n \n
\n

No file selected

\n
\n
\n
\n\n
\n

Select Enhancement Model

\n \n
\n\n \n\n
\n

Results

\n
\n
\n

Results will appear here

\n
\n
\n
\n
\n
\n\n
\n

MRI Enhancement Suite | Advanced Neuroimaging Tools

\n
\n\n---style.css---\n:root {\n --primary-color: #2a4365;\n --secondary-color: #4299e1;\n --background-color: #f7fafc;\n --text-color: #2d3748;\n --border-radius: 8px;\n --transition: all 0.3s ease;\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 line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n}\n\nheader {\n background: var(--primary-color);\n padding: 1rem;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n margin-left: 2rem;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n.hero {\n text-align: center;\n padding: 4rem 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\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: 2rem;\n}\n\n.upload-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin: 2rem 0;\n}\n\n.upload-box {\n background: white;\n padding: 2rem;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.upload-box:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 8px rgba(0,0,0,0.15);\n}\n\n.upload-box label {\n display: block;\n margin-bottom: 1rem;\n font-weight: bold;\n}\n\n.upload-box input[type=\"file\"] {\n width: 100%;\n padding: 0.5rem;\n border: 2px dashed var(--secondary-color);\n border-radius: var(--border-radius);\n cursor: pointer;\n}\n\n.preview {\n margin-top: 1rem;\n min-height: 200px;\n background: var(--background-color);\n border-radius: var(--border-radius);\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.model-selection {\n margin: 2rem 0;\n}\n\nselect {\n width: 100%;\n padding: 0.8rem;\n border-radius: var(--border-radius);\n border: 1px solid var(--secondary-color);\n background: white;\n margin-top: 1rem;\n}\n\n.process-button {\n display: block;\n width: 100%;\n padding: 1rem;\n background: var(--secondary-color);\n color: white;\n border: none;\n border-radius: var(--border-radius);\n font-size: 1.1rem;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.process-button:hover {\n background: var(--primary-color);\n transform: translateY(-1px);\n}\n\n.results-container {\n margin-top: 2rem;\n padding: 2rem;\n background: white;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n text-align: center;\n padding: 1rem;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n \n .upload-section {\n padding: 1rem;\n }\n \n .upload-container {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const t1Input = document.getElementById('t1-input');\n const t2Input = document.getElementById('t2-input');\n const t1Preview = document.getElementById('t1-preview');\n const t2Preview = document.getElementById('t2-preview');\n const processBtn = document.getElementById('process-btn');\n const outputPreview = document.getElementById('output-preview');\n \n function updatePreview(file, previewElement) {\n if (file) {\n previewElement.innerHTML = `\n
\n

File: ${file.name}

\n

Size: ${(file.size / 1024 / 1024).toFixed(2)} MB

\n
\n `;\n } else {\n previewElement.innerHTML = '

No file selected

';\n }\n }\n\n t1Input.addEventListener('change', (e) => {\n updatePreview(e.target.files[0], t1Preview);\n });\n\n t2Input.addEventListener('change', (e) => {\n updatePreview(e.target.files[0], t2Preview);\n });\n\n processBtn.addEventListener('click', async () => {\n if (!t1Input.files[0] || !t2Input.files[0]) {\n alert('Please upload both T1 and T2 images');\n return;\n }\n\n processBtn.disabled = true;\n processBtn.textContent = 'Processing...';\n\n try {\n // Simulate processing delay\n await new Promise(resolve => setTimeout(resolve, 2000));\n \n outputPreview.innerHTML = `\n
\n

Processing Complete!

\n

Enhanced T2w image generated successfully.

\n \n
\n `;\n } catch (error) {\n outputPreview.innerHTML = `\n
\n

Error processing images. Please try again.

\n
\n `;\n } finally {\n processBtn.disabled = false;\n processBtn.textContent = 'Process Images';\n }\n });\n});\n\n---end---\n\nThis implementation creates a beautiful, responsive webapp for MRI image enhancement with the following features:\n\n1. Clean, modern design with smooth animations and transitions\n2. Responsive layout that works on all devices\n3. File upload interface for T1w and T2w images\n4. Model selection dropdown (with future options disabled)\n5. Processing simulation with loading states\n6. Preview areas for uploaded files\n7. Results display section\n8. Accessible form controls and ARIA labels\n9. Error handling and user feedback\n10. Professional color scheme and typography\n\nThe design follows a blue-based color scheme that's appropriate for medical/scientific applications while maintaining a modern, professional look. The CSS includes advanced features like CSS Grid, Flexbox, CSS Variables, and smooth transitions. The JavaScript handles file uploads, previews, and simulates processing with proper error handling and loading states."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 379,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2804
+ }
+ }
readme.scroll
Changed around line 1
+ # mrienhance.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. 
Specifically, right now it only has one available usage that is upload a good quality T1w image, and the T2w image (motion corrupted). And it outputs the motion corrected T2w image.

But in the future, it can synthesize T2w contrast just from T1w image, super resolution T1w image
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const t1Input = document.getElementById('t1-input');
+ const t2Input = document.getElementById('t2-input');
+ const t1Preview = document.getElementById('t1-preview');
+ const t2Preview = document.getElementById('t2-preview');
+ const processBtn = document.getElementById('process-btn');
+ const outputPreview = document.getElementById('output-preview');
+
+ function updatePreview(file, previewElement) {
+ if (file) {
+ previewElement.innerHTML = `
+
+

File: ${file.name}

+

Size: ${(file.size / 1024 / 1024).toFixed(2)} MB

+
+ `;
+ } else {
+ previewElement.innerHTML = '

No file selected

';
+ }
+ }
+
+ t1Input.addEventListener('change', (e) => {
+ updatePreview(e.target.files[0], t1Preview);
+ });
+
+ t2Input.addEventListener('change', (e) => {
+ updatePreview(e.target.files[0], t2Preview);
+ });
+
+ processBtn.addEventListener('click', async () => {
+ if (!t1Input.files[0] || !t2Input.files[0]) {
+ alert('Please upload both T1 and T2 images');
+ return;
+ }
+
+ processBtn.disabled = true;
+ processBtn.textContent = 'Processing...';
+
+ try {
+ // Simulate processing delay
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ outputPreview.innerHTML = `
+
+

Processing Complete!

+

Enhanced T2w image generated successfully.

+
+ Download Result
+
+
+ `;
+ } catch (error) {
+ outputPreview.innerHTML = `
+
+

Error processing images. Please try again.

+
+ `;
+ } finally {
+ processBtn.disabled = false;
+ processBtn.textContent = 'Process Images';
+ }
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2a4365;
+ --secondary-color: #4299e1;
+ --background-color: #f7fafc;
+ --text-color: #2d3748;
+ --border-radius: 8px;
+ --transition: all 0.3s ease;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-color);
+ }
+
+ header {
+ background: var(--primary-color);
+ padding: 1rem;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ }
+
+ nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .logo {
+ color: white;
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: var(--transition);
+ }
+
+ .nav-links a:hover {
+ color: var(--secondary-color);
+ }
+
+ .hero {
+ text-align: center;
+ padding: 4rem 2rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .upload-section {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 2rem;
+ }
+
+ .upload-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin: 2rem 0;
+ }
+
+ .upload-box {
+ background: white;
+ padding: 2rem;
+ border-radius: var(--border-radius);
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: var(--transition);
+ }
+
+ .upload-box:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 8px rgba(0,0,0,0.15);
+ }
+
+ .upload-box label {
+ display: block;
+ margin-bottom: 1rem;
+ font-weight: bold;
+ }
+
+ .upload-box input[type="file"] {
+ width: 100%;
+ padding: 0.5rem;
+ border: 2px dashed var(--secondary-color);
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ }
+
+ .preview {
+ margin-top: 1rem;
+ min-height: 200px;
+ background: var(--background-color);
+ border-radius: var(--border-radius);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ }
+
+ .model-selection {
+ margin: 2rem 0;
+ }
+
+ select {
+ width: 100%;
+ padding: 0.8rem;
+ border-radius: var(--border-radius);
+ border: 1px solid var(--secondary-color);
+ background: white;
+ margin-top: 1rem;
+ }
+
+ .process-button {
+ display: block;
+ width: 100%;
+ padding: 1rem;
+ background: var(--secondary-color);
+ color: white;
+ border: none;
+ border-radius: var(--border-radius);
+ font-size: 1.1rem;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .process-button:hover {
+ background: var(--primary-color);
+ transform: translateY(-1px);
+ }
+
+ .results-container {
+ margin-top: 2rem;
+ padding: 2rem;
+ background: white;
+ border-radius: var(--border-radius);
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ }
+
+ footer {
+ background: var(--primary-color);
+ color: white;
+ text-align: center;
+ padding: 1rem;
+ margin-top: 2rem;
+ }
+
+ @media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ .upload-section {
+ padding: 1rem;
+ }
+
+ .upload-container {
+ grid-template-columns: 1fr;
+ }
+ }