Spaces:

auraforllm
/

ct-lung-analyzer-ai

Running

App Files Files Community

auraforllm commited on Sep 29, 2025

Commit

018958d

verified ·

1 Parent(s): 10985e5

напиши сайт на aiogram-3 для анализа CT снимков легких, чтобы оно работало по такому пайплайну: 1) Пользователь загружает dicom файл 2) Он поступает на анализ с помощью нейросетевой модели 3) Пользователю выводится результат анализа. Нужно сохранять результаты для файлов в зависимости от сессии, авторизация пользователей не нужна.

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +363 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Ct Lung Analyzer Ai
-emoji: 🐠
-colorFrom: indigo
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CT Lung Analyzer AI 🫁
+colorFrom: gray
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,364 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CT Lung Analyzer AI</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6366f1',
+                        secondary: '#8b5cf6',
+                        dark: '#0f172a',
+                        light: '#f8fafc'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+        }
+        .upload-area {
+            border: 2px dashed #8b5cf6;
+            transition: all 0.3s ease;
+        }
+        .upload-area:hover {
+            border-color: #6366f1;
+            background: rgba(99, 102, 241, 0.05);
+        }
+        .result-card {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .result-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        .progress-bar {
+            height: 6px;
+            background: linear-gradient(90deg, #6366f1, #8b5cf6);
+        }
+    </style>
+</head>
+<body class="bg-dark text-light min-h-screen">
+    <!-- Background Animation -->
+    <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
+    <!-- Main Content -->
+    <div class="relative z-10 container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex flex-col md:flex-row justify-between items-center mb-12 py-6 glass-effect rounded-2xl px-6">
+            <div class="flex items-center mb-4 md:mb-0">
+                <div class="bg-primary p-3 rounded-xl mr-4">
+                    <i data-feather="activity" class="w-8 h-8"></i>
+                </div>
+                <div>
+                    <h1 class="text-3xl font-bold">CT Lung Analyzer AI</h1>
+                    <p class="text-purple-200">Advanced pulmonary pathology detection</p>
+                </div>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button id="session-btn" class="bg-secondary hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center">
+                    <i data-feather="user" class="mr-2"></i>
+                    <span id="session-id">Session: XXXXXX</span>
+                </button>
+            </div>
+        </header>
+        <!-- Upload Section -->
+        <section class="mb-16">
+            <div class="glass-effect rounded-2xl p-8">
+                <h2 class="text-2xl font-bold mb-6 text-center">Upload DICOM Files</h2>
+                <div id="upload-area" class="upload-area rounded-xl p-12 text-center cursor-pointer">
+                    <i data-feather="upload-cloud" class="w-16 h-16 mx-auto text-secondary mb-4"></i>
+                    <h3 class="text-xl font-semibold mb-2">Drag & Drop DICOM Files</h3>
+                    <p class="text-gray-300 mb-4">or click to browse your files</p>
+                    <button class="bg-primary hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium">
+                        Select Files
+                    </button>
+                    <input type="file" id="file-input" accept=".dcm" multiple class="hidden">
+                </div>
+                <div id="file-list" class="mt-6 hidden">
+                    <h3 class="text-lg font-semibold mb-3">Selected Files:</h3>
+                    <ul id="files-container" class="space-y-2"></ul>
+                </div>
+                <div class="mt-8 text-center">
+                    <button id="analyze-btn" class="bg-gradient-to-r from-primary to-secondary hover:from-indigo-700 hover:to-purple-700 text-white px-8 py-4 rounded-xl font-bold text-lg shadow-lg transform hover:scale-105 transition-all duration-300">
+                        Analyze CT Scans
+                    </button>
+                </div>
+            </div>
+        </section>
+        <!-- Progress Section -->
+        <section id="progress-section" class="mb-16 hidden">
+            <div class="glass-effect rounded-2xl p-8">
+                <h2 class="text-2xl font-bold mb-6 text-center">Analysis in Progress</h2>
+                <div class="max-w-2xl mx-auto">
+                    <div class="flex justify-between mb-2">
+                        <span id="progress-text">Processing files...</span>
+                        <span id="progress-percent">0%</span>
+                    </div>
+                    <div class="bg-gray-700 rounded-full h-4">
+                        <div id="progress-bar" class="progress-bar rounded-full w-0"></div>
+                    </div>
+                    <div id="processing-files" class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
+                </div>
+            </div>
+        </section>
+        <!-- Results Section -->
+        <section id="results-section" class="hidden">
+            <div class="glass-effect rounded-2xl p-8 mb-8">
+                <h2 class="text-2xl font-bold mb-6 text-center">Analysis Results</h2>
+                <div id="results-container" class="grid grid-cols-1 lg:grid-cols-2 gap-6"></div>
+            </div>
+        </section>
+        <!-- Footer -->
+        <footer class="glass-effect rounded-2xl p-6 text-center text-gray-300">
+            <p>Powered by aiogram-3 | Advanced Neural Network Analysis | © 2023 CT Lung Analyzer AI</p>
+        </footer>
+    </div>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        // Initialize Vanta.js Background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x6366f1,
+            color2: 0x8b5cf6,
+            backgroundColor: 0x0f172a
+        });
+        // Session Management
+        function generateSessionId() {
+            return Math.random().toString(36).substring(2, 8).toUpperCase();
+        }
+        document.getElementById('session-id').textContent = 'Session: ' + generateSessionId();
+        // File Upload Handling
+        const uploadArea = document.getElementById('upload-area');
+        const fileInput = document.getElementById('file-input');
+        const fileList = document.getElementById('file-list');
+        const filesContainer = document.getElementById('files-container');
+        let selectedFiles = [];
+        uploadArea.addEventListener('click', () => {
+            fileInput.click();
+        });
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('bg-indigo-900/20');
+        });
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('bg-indigo-900/20');
+        });
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('bg-indigo-900/20');
+            handleFiles(e.dataTransfer.files);
+        });
+        fileInput.addEventListener('change', () => {
+            handleFiles(fileInput.files);
+        });
+        function handleFiles(files) {
+            [...files].forEach(file => {
+                if (file.name.endsWith('.dcm')) {
+                    selectedFiles.push(file);
+                }
+            });
+            updateFileList();
+        }
+        function updateFileList() {
+            if (selectedFiles.length > 0) {
+                fileList.classList.remove('hidden');
+                filesContainer.innerHTML = '';
+                selectedFiles.forEach((file, index) => {
+                    const li = document.createElement('li');
+                    li.className = 'flex justify-between items-center bg-dark/50 p-3 rounded-lg';
+                    li.innerHTML = `
+                        <span class="truncate mr-2">${file.name}</span>
+                        <button onclick="removeFile(${index})" class="text-red-400 hover:text-red-300">
+                            <i data-feather="x"></i>
+                        </button>
+                    `;
+                    filesContainer.appendChild(li);
+                });
+                feather.replace();
+            } else {
+                fileList.classList.add('hidden');
+            }
+        }
+        function removeFile(index) {
+            selectedFiles.splice(index, 1);
+            updateFileList();
+        }
+        // Analysis Process
+        document.getElementById('analyze-btn').addEventListener('click', startAnalysis);
+        function startAnalysis() {
+            if (selectedFiles.length === 0) {
+                alert('Please select at least one DICOM file');
+                return;
+            }
+            // Show progress section
+            document.getElementById('progress-section').classList.remove('hidden');
+            document.getElementById('results-section').classList.add('hidden');
+            // Simulate analysis process
+            simulateAnalysis();
+        }
+        function simulateAnalysis() {
+            const progressBar = document.getElementById('progress-bar');
+            const progressText = document.getElementById('progress-text');
+            const progressPercent = document.getElementById('progress-percent');
+            const processingFiles = document.getElementById('processing-files');
+            // Reset progress
+            progressBar.style.width = '0%';
+            progressPercent.textContent = '0%';
+            // Display processing files
+            processingFiles.innerHTML = '';
+            selectedFiles.forEach((file, index) => {
+                const div = document.createElement('div');
+                div.className = 'bg-dark/50 p-4 rounded-lg';
+                div.innerHTML = `
+                    <div class="flex items-center">
+                        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-primary mr-3"></div>
+                        <span class="truncate">${file.name}</span>
+                    </div>
+                    <div class="mt-2 h-2 bg-gray-700 rounded-full overflow-hidden">
+                        <div id="file-progress-${index}" class="h-full bg-gradient-to-r from-primary to-secondary w-0"></div>
+                    </div>
+                `;
+                processingFiles.appendChild(div);
+            });
+            // Simulate progress
+            let progress = 0;
+            const interval = setInterval(() => {
+                progress += Math.random() * 10;
+                if (progress >= 100) {
+                    progress = 100;
+                    clearInterval(interval);
+                    setTimeout(showResults, 500);
+                }
+                progressBar.style.width = `${progress}%`;
+                progressPercent.textContent = `${Math.round(progress)}%`;
+                progressText.textContent = `Processing ${Math.min(selectedFiles.length, Math.ceil(progress / (100/selectedFiles.length)))} of ${selectedFiles.length} files`;
+                // Update individual file progress
+                selectedFiles.forEach((_, index) => {
+                    const fileProgress = document.getElementById(`file-progress-${index}`);
+                    if (fileProgress) {
+                        const fileValue = Math.min(100, progress + (Math.random() * 20 - 10));
+                        fileProgress.style.width = `${fileValue}%`;
+                    }
+                });
+            }, 300);
+        }
+        function showResults() {
+            document.getElementById('progress-section').classList.add('hidden');
+            document.getElementById('results-section').classList.remove('hidden');
+            const resultsContainer = document.getElementById('results-container');
+            resultsContainer.innerHTML = '';
+            selectedFiles.forEach((file, index) => {
+                // Generate mock results
+                const anomalies = [
+                    { name: "Pneumonia", confidence: Math.random() * 0.4 + 0.6 },
+                    { name: "Nodule", confidence: Math.random() * 0.3 + 0.4 },
+                    { name: "Emphysema", confidence: Math.random() * 0.2 + 0.3 }
+                ];
+                const resultCard = document.createElement('div');
+                resultCard.className = 'result-card bg-dark/50 rounded-2xl overflow-hidden';
+                resultCard.innerHTML = `
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold truncate mr-2">${file.name}</h3>
+                            <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">
+                                Completed
+                            </span>
+                        </div>
+                        <div class="mb-6 rounded-xl overflow-hidden">
+                            <img src="http://static.photos/medical/640x360/${index + 1}" alt="CT Scan Visualization" class="w-full h-48 object-cover">
+                        </div>
+                        <div class="mb-6">
+                            <h4 class="font-semibold mb-3">Detected Anomalies:</h4>
+                            <div class="space-y-3">
+                                ${anomalies.map(anomaly => `
+                                    <div>
+                                        <div class="flex justify-between mb-1">
+                                            <span>${anomaly.name}</span>
+                                            <span class="${anomaly.confidence > 0.7 ? 'text-red-400' : anomaly.confidence > 0.5 ? 'text-yellow-400' : 'text-green-400'}">
+                                                ${(anomaly.confidence * 100).toFixed(1)}%
+                                            </span>
+                                        </div>
+                                        <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
+                                            <div class="h-full ${anomaly.confidence > 0.7 ? 'bg-red-500' : anomaly.confidence > 0.5 ? 'bg-yellow-500' : 'bg-green-500'}"
+                                                 style="width: ${(anomaly.confidence * 100)}%"></div>
+                                        </div>
+                                    </div>
+                                `).join('')}
+                            </div>
+                        </div>
+                        <div class="flex space-x-3">
+                            <button class="flex-1 bg-primary hover:bg-indigo-700 py-2 rounded-lg flex items-center justify-center">
+                                <i data-feather="download" class="mr-2"></i> Download Report
+                            </button>
+                            <button class="flex-1 bg-secondary hover:bg-purple-700 py-2 rounded-lg flex items-center justify-center">
+                                <i data-feather="eye" class="mr-2"></i> View Details
+                            </button>
+                        </div>
+                    </div>
+                `;
+                resultsContainer.appendChild(resultCard);
+            });
+            feather.replace();
+        }
+    </script>
+</body>
 </html>