affter upload I didn't see anything

README.md

@@ -1,10 +1,13 @@
 ---
-title: Solguardian Smart Contract Shield
-emoji: 🐨
-colorFrom: green
-colorTo: red
+title: SolGuardian - Smart Contract Shield 🛡️
+colorFrom: blue
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/file-card.js

@@ -0,0 +1,145 @@
+class CustomFileCard extends HTMLElement {
+    static get observedAttributes() {
+        return ['status'];
+    }
+    
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    
+    connectedCallback() {
+        this.render();
+    }
+    
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'status') {
+            this.render();
+        }
+    }
+    
+    render() {
+        const name = this.getAttribute('name') || 'Untitled';
+        const status = this.getAttribute('status') || 'pending';
+        
+        let statusText, statusColor, icon;
+        
+        switch(status) {
+            case 'pending':
+                statusText = 'Analyzing...';
+                statusColor = 'bg-yellow-500';
+                icon = 'clock';
+                break;
+            case 'safe':
+                statusText = 'Secure';
+                statusColor = 'bg-green-500';
+                icon = 'check-circle';
+                break;
+            case 'vulnerable':
+                statusText = 'Vulnerable';
+                statusColor = 'bg-red-500';
+                icon = 'alert-triangle';
+                break;
+            case 'error':
+                statusText = 'Error';
+                statusColor = 'bg-gray-500';
+                icon = 'x-circle';
+                break;
+            default:
+                statusText = 'Unknown';
+                statusColor = 'bg-gray-500';
+                icon = 'help-circle';
+        }
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+                .card {
+                    background-color: white;
+                    border-radius: 0.75rem;
+                    overflow: hidden;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                    transition: all 0.3s ease;
+                }
+                .card:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+                }
+                .card-header {
+                    padding: 1.5rem;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+                .card-title {
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                    color: #1f2937;
+                    margin-bottom: 0.5rem;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                .card-body {
+                    padding: 1.5rem;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                }
+                .status {
+                    display: inline-flex;
+                    align-items: center;
+                    padding: 0.25rem 0.75rem;
+                    border-radius: 9999px;
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    color: white;
+                }
+                .icon {
+                    width: 3rem;
+                    height: 3rem;
+                    margin-bottom: 1rem;
+                }
+                .progress-bar {
+                    width: 100%;
+                    height: 0.5rem;
+                    background-color: #e5e7eb;
+                    border-radius: 0.25rem;
+                    overflow: hidden;
+                    margin-top: 1rem;
+                }
+                .progress {
+                    height: 100%;
+                    background-color: #3b82f6;
+                    width: ${status === 'pending' ? '50%' : '100%'};
+                    animation: ${status === 'pending' ? 'pulse 2s infinite' : 'none'};
+                }
+                @keyframes pulse {
+                    0% { opacity: 0.6; }
+                    50% { opacity: 1; }
+                    100% { opacity: 0.6; }
+                }
+            </style>
+            
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">${name}</h3>
+                    <div class="status ${statusColor}">
+                        <i data-feather="${icon}" class="mr-1" width="14" height="14"></i>
+                        ${statusText}
+                    </div>
+                </div>
+                <div class="card-body">
+                    <i data-feather="${icon === 'clock' ? 'code' : icon}" class="icon" width="48" height="48"></i>
+                    <div class="progress-bar">
+                        <div class="progress"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Replace feather icons
+        if (this.shadowRoot.querySelector('[data-feather]')) {
+            feather.replace();
+        }
+    }
+}
+
+customElements.define('custom-file-card', CustomFileCard);

components/navbar.js

@@ -0,0 +1,70 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background-color: white;
+                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                    padding: 1rem 2rem;
+                }
+                .container {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    max-width: 1200px;
+                    margin: 0 auto;
+                }
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    font-weight: 700;
+                    font-size: 1.5rem;
+                    color: #1e40af;
+                    text-decoration: none;
+                }
+                .logo-icon {
+                    margin-right: 0.5rem;
+                }
+                .nav-links {
+                    display: flex;
+                    gap: 1.5rem;
+                }
+                .nav-link {
+                    color: #4b5563;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: color 0.2s;
+                }
+                .nav-link:hover {
+                    color: #1e40af;
+                }
+                @media (max-width: 768px) {
+                    .container {
+                        flex-direction: column;
+                        gap: 1rem;
+                    }
+                    .nav-links {
+                        width: 100%;
+                        justify-content: space-around;
+                    }
+                }
+            </style>
+            <nav>
+                <div class="container">
+                    <a href="index.html" class="logo">
+                        <i data-feather="shield" class="logo-icon"></i>
+                        SolGuardian
+                    </a>
+                    <div class="nav-links">
+                        <a href="index.html" class="nav-link">Home</a>
+                        <a href="#" class="nav-link">Documentation</a>
+                        <a href="#" class="nav-link">About</a>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,85 @@
-<!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>SolGuardian - Smart Contract Analysis</title>
+    <link rel="stylesheet" href="style.css">
+    <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/three@0.132.2/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/file-card.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-4">Smart Contract Vulnerability Scanner</h1>
+            <p class="text-xl text-gray-600 max-w-3xl mx-auto">Upload your Solidity files to detect vulnerabilities with AI-powered analysis</p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="file-container">
+            <!-- File cards will be added here dynamically -->
+            
+            <!-- Add new file card -->
+            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer" id="add-file-card">
+                <div class="p-8 flex flex-col items-center justify-center h-full">
+                    <i data-feather="plus" class="w-16 h-16 text-blue-500 mb-4"></i>
+                    <h3 class="text-xl font-semibold text-gray-800">Add New Contract</h3>
+                </div>
+            </div>
+        </div>
+
+        <!-- File upload modal -->
+        <div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+            <div class="bg-white rounded-xl p-8 w-full max-w-md">
+                <div class="flex justify-between items-center mb-6">
+                    <h3 class="text-2xl font-bold text-gray-800">Upload Solidity File</h3>
+                    <button id="close-modal" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+                
+                <form id="upload-form" class="space-y-6">
+                    <div>
+                        <label for="file-name" class="block text-sm font-medium text-gray-700 mb-1">Project Name</label>
+                        <input type="text" id="file-name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                    
+                    <div>
+                        <label for="file-upload" class="block text-sm font-medium text-gray-700 mb-1">Solidity File</label>
+                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
+                            <div class="space-y-1 text-center">
+                                <div class="flex text-sm text-gray-600">
+                                    <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
+                                        <span>Upload a file</span>
+                                        <input id="file-upload" name="file-upload" type="file" accept=".sol" class="sr-only" required>
+                                    </label>
+                                    <p class="pl-1">or drag and drop</p>
+                                </div>
+                                <p class="text-xs text-gray-500">.sol files only</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition-colors duration-300 flex items-center justify-center">
+                        <i data-feather="upload" class="mr-2"></i>
+                        Analyze Contract
+                    </button>
+                </form>
+            </div>
+        </div>
+    </main>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,135 @@
+
+// Load previously uploaded files when page loads
+function loadSavedFiles() {
+    const files = JSON.parse(localStorage.getItem('uploadedFiles') || '[]');
+    const fileContainer = document.getElementById('file-container');
+    
+    // Clear existing cards except the add button
+    const existingCards = document.querySelectorAll('custom-file-card');
+    existingCards.forEach(card => card.remove());
+    
+    // Recreate cards from localStorage
+    files.forEach(file => {
+        const card = document.createElement('custom-file-card');
+        card.setAttribute('name', file.name);
+        card.setAttribute('status', file.status);
+        fileContainer.insertBefore(card, addFileCard);
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Load any previously uploaded files
+    loadSavedFiles();
+// Initialize modal functionality
+    const addFileCard = document.getElementById('add-file-card');
+    const uploadModal = document.getElementById('upload-modal');
+    const closeModal = document.getElementById('close-modal');
+    const uploadForm = document.getElementById('upload-form');
+    
+    // Open modal when add file card is clicked
+    addFileCard.addEventListener('click', () => {
+        uploadModal.classList.remove('hidden');
+    });
+    
+    // Close modal
+    closeModal.addEventListener('click', () => {
+        uploadModal.classList.add('hidden');
+    });
+    
+    // Handle file upload
+    uploadForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        const fileName = document.getElementById('file-name').value;
+        const fileInput = document.getElementById('file-upload');
+        const file = fileInput.files[0];
+        
+        if (!file || !fileName) return;
+        
+        // Create a new file card immediately
+        createFileCard(fileName, 'pending');
+        
+        // Close modal
+        uploadModal.classList.add('hidden');
+        // Simulate API call with mock response
+        try {
+            // Show loading state
+            updateFileCardStatus(fileName, 'pending');
+            
+            // Simulate API delay
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            
+            // Generate mock response
+            const mockResponse = {
+                node: 'detect_vulnerability_src',
+                output: {
+                    predicted_class: Math.random() > 0.5 ? 1 : 0, // Random vulnerability
+                    confidence_score: (Math.random() * 0.5 + 0.5).toFixed(2) // Random confidence 0.5-1.0
+                }
+            };
+            
+            // Process the mock response
+            processAnalysisData(fileName, mockResponse);
+        } catch (error) {
+            console.error('Error:', error);
+            updateFileCardStatus(fileName, 'error');
+            
+            // Show error message to user
+            alert('Analysis failed. Please try again.');
+        }
+        
+        // Reset form
+        uploadForm.reset();
+});
+    // Function to create a new file card
+    function createFileCard(name, status) {
+        const fileContainer = document.getElementById('file-container');
+        const card = document.createElement('custom-file-card');
+        card.setAttribute('name', name);
+        card.setAttribute('status', status);
+        fileContainer.insertBefore(card, addFileCard);
+        
+        // Store the file info in localStorage
+        const files = JSON.parse(localStorage.getItem('uploadedFiles') || '[]');
+        files.push({ name, status });
+        localStorage.setItem('uploadedFiles', JSON.stringify(files));
+    }
+    // Function to update file card status
+    function updateFileCardStatus(name, status) {
+        const cards = document.querySelectorAll('custom-file-card');
+        for (const card of cards) {
+            if (card.getAttribute('name') === name) {
+                card.setAttribute('status', status);
+                
+                // Update the file status in localStorage
+                const files = JSON.parse(localStorage.getItem('uploadedFiles') || '[]');
+                const fileIndex = files.findIndex(f => f.name === name);
+                if (fileIndex !== -1) {
+                    files[fileIndex].status = status;
+                    localStorage.setItem('uploadedFiles', JSON.stringify(files));
+                }
+                break;
+            }
+        }
+    }
+// Process analysis data from API
+    function processAnalysisData(fileName, data) {
+        if (data.node === 'detect_vulnerability_src') {
+            const isVulnerable = data.output.predicted_class === 1;
+            updateFileCardStatus(fileName, isVulnerable ? 'vulnerable' : 'safe');
+            
+            // Store analysis data for later use in the analysis page
+            localStorage.setItem(`analysis_${fileName}`, JSON.stringify({
+                isVulnerable,
+                confidence: data.output.confidence_score
+            }));
+            
+            // Redirect to analysis page if vulnerable
+            if (isVulnerable) {
+                setTimeout(() => {
+                    window.location.href = `analysis.html?file=${encodeURIComponent(fileName)}`;
+                }, 1500);
+            }
+        }
+    }
+});

style.css

@@ -1,28 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Animation for vulnerability graph nodes */
+@keyframes pulse-red {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+.vulnerable-node {
+    animation: pulse-red 2s infinite;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
+
+/* Transition effects */
+.fade-enter-active, .fade-leave-active {
+    transition: opacity 0.3s;
+}
+.fade-enter, .fade-leave-to {
+    opacity: 0;
+}
+
+/* 3D graph container */
+.graph-container {
+    width: 100%;
+    height: 500px;
+    background: #f8fafc;
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+}