Upload 4 files

README.md

@@ -1,10 +0,0 @@
----
-title: Sketch2Render
-emoji: 🐠
-colorFrom: green
-colorTo: gray
-sdk: static
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

requirements.txt

@@ -0,0 +1 @@
+No Packages Require

script.js

@@ -0,0 +1,329 @@
+class SketchToRenderApp {
+    constructor() {
+        this.canvas = document.getElementById('drawingCanvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.isDrawing = false;
+        this.drawingHistory = [];
+        this.currentPath = [];
+        this.renderedImageUrl = null;
+        
+        // API Key được nhúng trực tiếp trong code
+        this.apiKey = 'AIzaSyCinF1_Z7XXPzu_zvMzifKyPIy7i7eUBGc'; // Thay thế bằng API key thực tế 
+        
+        this.initializeCanvas();
+        this.setupEventListeners();
+        this.saveCanvasState();
+    }
+
+    initializeCanvas() {
+        this.ctx.lineCap = 'round';
+        this.ctx.lineJoin = 'round';
+        this.ctx.fillStyle = 'white';
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    setupEventListeners() {
+        // Canvas drawing events
+        this.canvas.addEventListener('mousedown', (e) => this.startDrawing(e));
+        this.canvas.addEventListener('mousemove', (e) => this.draw(e));
+        this.canvas.addEventListener('mouseup', () => this.stopDrawing());
+        this.canvas.addEventListener('mouseout', () => this.stopDrawing());
+
+        // Touch events for mobile
+        this.canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            const touch = e.touches[0];
+            const mouseEvent = new MouseEvent('mousedown', {
+                clientX: touch.clientX,
+                clientY: touch.clientY
+            });
+            this.canvas.dispatchEvent(mouseEvent);
+        });
+
+        this.canvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            const touch = e.touches[0];
+            const mouseEvent = new MouseEvent('mousemove', {
+                clientX: touch.clientX,
+                clientY: touch.clientY
+            });
+            this.canvas.dispatchEvent(mouseEvent);
+        });
+
+        this.canvas.addEventListener('touchend', (e) => {
+            e.preventDefault();
+            const mouseEvent = new MouseEvent('mouseup', {});
+            this.canvas.dispatchEvent(mouseEvent);
+        });
+
+        // Control events
+        document.getElementById('brushSize').addEventListener('input', (e) => {
+            document.getElementById('brushSizeValue').textContent = e.target.value + 'px';
+        });
+
+        document.getElementById('clearCanvas').addEventListener('click', () => {
+            this.clearCanvas();
+        });
+
+        document.getElementById('undoBtn').addEventListener('click', () => {
+            this.undo();
+        });
+
+        document.getElementById('generateBtn').addEventListener('click', () => {
+            this.generateRender();
+        });
+
+        document.getElementById('downloadBtn').addEventListener('click', () => {
+            this.downloadImage();
+        });
+    }
+
+    getMousePos(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        };
+    }
+
+    startDrawing(e) {
+        this.isDrawing = true;
+        const pos = this.getMousePos(e);
+        this.currentPath = [pos];
+        
+        this.ctx.strokeStyle = document.getElementById('brushColor').value;
+        this.ctx.lineWidth = document.getElementById('brushSize').value;
+        
+        this.ctx.beginPath();
+        this.ctx.moveTo(pos.x, pos.y);
+    }
+
+    draw(e) {
+        if (!this.isDrawing) return;
+
+        const pos = this.getMousePos(e);
+        this.currentPath.push(pos);
+        
+        this.ctx.lineTo(pos.x, pos.y);
+        this.ctx.stroke();
+    }
+
+    stopDrawing() {
+        if (this.isDrawing) {
+            this.isDrawing = false;
+            this.saveCanvasState();
+        }
+    }
+
+    saveCanvasState() {
+        this.drawingHistory.push(this.canvas.toDataURL());
+        if (this.drawingHistory.length > 20) {
+            this.drawingHistory.shift();
+        }
+    }
+
+    clearCanvas() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.fillStyle = 'white';
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        this.saveCanvasState();
+    }
+
+    undo() {
+        if (this.drawingHistory.length > 1) {
+            this.drawingHistory.pop();
+            const previousState = this.drawingHistory[this.drawingHistory.length - 1];
+            const img = new Image();
+            img.onload = () => {
+                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+                this.ctx.drawImage(img, 0, 0);
+            };
+            img.src = previousState;
+        }
+    }
+
+    async generateRender() {
+        if (!this.apiKey || this.apiKey === 'YOUR_GEMINI_API_KEY_HERE') {
+            this.showError('Vui lòng cấu hình API Key trong source code');
+            return;
+        }
+
+        // Check if canvas is empty
+        if (this.isCanvasEmpty()) {
+            this.showError('Vui lòng vẽ gì đó trước khi tạo render');
+            return;
+        }
+
+        this.showLoading(true);
+        this.hideError();
+
+        try {
+            // Step 1: Analyze sketch with Gemini
+            const analysisResult = await this.analyzeSketchWithGemini();
+            console.log('Analysis result:', analysisResult);
+            
+            // Step 2: Generate image using the description from Gemini
+            const imageUrl = await this.generateImageFromDescription(analysisResult.description);
+            
+            // Step 3: Display results
+            this.displayResults(imageUrl, analysisResult.score, analysisResult.prediction);
+
+        } catch (error) {
+            console.error('Error:', error);
+            this.showError(`Lỗi: ${error.message}`);
+        } finally {
+            this.showLoading(false);
+        }
+    }
+
+    isCanvasEmpty() {
+        const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+        return imageData.data.every((pixel, index) => {
+            if ((index + 1) % 4 === 0) return true; // Alpha channel
+            return pixel === 255; // White pixels
+        });
+    }
+
+    async analyzeSketchWithGemini() {
+        const canvasDataURL = this.canvas.toDataURL('image/png');
+        const base64Data = canvasDataURL.split(',')[1];
+
+        const prompt = `Phân tích bức vẽ sketch này và cung cấp:
+
+1. ĐIỂM SỐ: Đánh giá chất lượng và độ rõ ràng từ 1–10, với tiêu chuẩn thoải mái (hình được vẽ bởi người bình thường bằng bút đen trên canvas, không yêu cầu đường nét hoàn hảo).
+2. DỰ ĐOÁN: Tên ngắn gọn của sự vật được vẽ (VD: "Mèo", "Ngôi nhà", "Hoa")  
+3. MÔ TẢ: Mô tả ngắn gọn để tạo ảnh render (viết bằng tiếng Anh, phong cách artistic)
+
+Định dạng trả lời:
+ĐIỂM: [số]
+DỰ ĐOÁN: [tên sự vật]
+MÔ TẢ: [mô tả ngắn gọn bằng tiếng Anh]`;
+
+        const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${this.apiKey}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                contents: [{
+                    parts: [
+                        { text: prompt },
+                        {
+                            inline_data: {
+                                mime_type: "image/png",
+                                data: base64Data
+                            }
+                        }
+                    ]
+                }]
+            })
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(`Gemini API Error: ${errorData.error?.message || 'Unknown error'}`);
+        }
+
+        const data = await response.json();
+        
+        if (data.candidates && data.candidates.length > 0) {
+            const result = data.candidates[0].content.parts[0].text;
+            return this.parseGeminiResponse(result);
+        } else {
+            throw new Error('Không có kết quả từ Gemini API');
+        }
+    }
+
+    parseGeminiResponse(text) {
+        console.log('Gemini response:', text);
+        
+        // Extract score
+        const scoreMatch = text.match(/ĐIỂM[:\s]*(\d+)/i) || text.match(/score[:\s]*(\d+)/i);
+        const score = scoreMatch ? parseInt(scoreMatch[1]) : 7;
+
+        // Extract prediction  
+        const predictionMatch = text.match(/DỰ ĐOÁN[:\s]*([^\n]+)/i) || text.match(/prediction[:\s]*([^\n]+)/i);
+        const prediction = predictionMatch ? predictionMatch[1].trim() : 'Không xác định';
+
+        // Extract description
+        const descriptionMatch = text.match(/MÔ TẢ[:\s]*([^]*)/i) || text.match(/description[:\s]*([^]*)/i);
+        let description = descriptionMatch ? descriptionMatch[1].trim() : text;
+        
+        // If no specific description found, use the whole response
+        if (!descriptionMatch) {
+            // Try to extract the most descriptive part
+            const lines = text.split('\n').filter(line => line.trim().length > 20);
+            description = lines.length > 0 ? lines[lines.length - 1] : text;
+        }
+
+        return {
+            score: Math.min(Math.max(score, 1), 10), // Ensure score is between 1-10
+            prediction: prediction.replace(/^["']|["']$/g, ''), // Remove quotes
+            description: description.replace(/^["']|["']$/g, '') // Remove quotes
+        };
+    }
+
+    async generateImageFromDescription(description) {
+        // Using Pollinations AI (free image generation API)
+        // This creates an image based on the description from Gemini
+        const enhancedPrompt = `${description}, high quality, detailed artwork, professional illustration`;
+        const encodedPrompt = encodeURIComponent(enhancedPrompt);
+        
+        // Generate a unique seed to avoid caching
+        const seed = Math.floor(Math.random() * 1000000);
+        const imageUrl = `https://image.pollinations.ai/prompt/${encodedPrompt}?seed=${seed}&width=512&height=512&model=flux`;
+        
+        // Verify the image loads
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(imageUrl);
+            img.onerror = () => reject(new Error('Không thể tạo ảnh render'));
+            img.src = imageUrl;
+        });
+    }
+
+    displayResults(imageUrl, score, prediction) {
+        // Display rendered image
+        const imageContainer = document.getElementById('imageContainer');
+        imageContainer.innerHTML = `<img src="${imageUrl}" alt="Rendered Image" class="rendered-image">`;
+        
+        this.renderedImageUrl = imageUrl;
+        document.getElementById('downloadBtn').style.display = 'block';
+        
+        // Display results
+        document.getElementById('scoreDisplay').textContent = `${score}/10`;
+        document.getElementById('predictionText').textContent = prediction;
+
+        // Show results
+        document.getElementById('resultContent').style.display = 'block';
+    }
+
+    downloadImage() {
+        if (this.renderedImageUrl) {
+            const link = document.createElement('a');
+            link.download = `sketch-render-${Date.now()}.png`;
+            link.href = this.renderedImageUrl;
+            link.click();
+        }
+    }
+
+    showLoading(show) {
+        document.getElementById('loading').style.display = show ? 'block' : 'none';
+        document.getElementById('resultContent').style.display = show ? 'none' : 'block';
+    }
+
+    showError(message) {
+        const errorElement = document.getElementById('errorMessage');
+        errorElement.textContent = message;
+        errorElement.style.display = 'block';
+    }
+
+    hideError() {
+        document.getElementById('errorMessage').style.display = 'none';
+    }
+}
+
+// Initialize the app when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    new SketchToRenderApp();
+});

style.css

@@ -1,28 +1,349 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.container {
+    max-width: 1600px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
+    overflow: hidden;
+}
+
+.header {
+    background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc05 75%, #ea4335 100%);
+    color: white;
+    padding: 30px;
+    text-align: center;
+}
+
+.header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    font-weight: 700;
+}
+
+.header p {
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+.main-content {
+    display: grid;
+    grid-template-columns: 500px 1fr;
+    gap: 30px;
+    padding: 30px;
+}
+
+.drawing-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.canvas-container {
+    position: relative;
+    border: 3px solid #e0e0e0;
+    border-radius: 15px;
+    overflow: hidden;
+    background: #fafafa;
+    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
+}
+
+#drawingCanvas {
+    display: block;
+    cursor: crosshair;
+    background: white;
+}
+
+.controls {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 15px;
+    border: 1px solid #e9ecef;
+}
+
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.control-group label {
+    font-weight: 600;
+    color: #495057;
+    font-size: 0.9rem;
+}
+
+input[type="range"] {
+    width: 100px;
+    accent-color: #4285f4;
+}
+
+input[type="color"] {
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.btn {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 10px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(66, 133, 244, 0.4);
+}
+
+.btn-secondary {
+    background: #6c757d;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #5a6268;
+    transform: translateY(-2px);
+}
+
+.results-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.generate-section {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 15px;
+    border: 1px solid #e9ecef;
+    text-align: center;
+}
+
+.generate-section h3 {
+    color: #495057;
+    margin-bottom: 15px;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.gemini-logo {
+    font-size: 1.5rem;
+}
+
+.render-results {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 15px;
+    border: 1px solid #e9ecef;
+    min-height: 600px;
+}
+
+.render-results h3 {
+    color: #495057;
+    margin-bottom: 20px;
+    font-size: 1.2rem;
+}
+
+.loading {
+    display: none;
+    text-align: center;
+    padding: 40px;
+}
+
+.loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid #e9ecef;
+    border-top: 4px solid #4285f4;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.result-content {
+    display: none;
+}
+
+.result-grid {
+    display: grid;
+    grid-template-columns: 1fr 300px;
+    gap: 20px;
+}
+
+.rendered-image-container {
+    background: white;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+.rendered-image-container h4 {
+    color: #495057;
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+}
+
+.rendered-image {
+    max-width: 100%;
+    max-height: 400px;
+    border-radius: 10px;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+    margin-bottom: 15px;
+}
+
+.image-placeholder {
+    width: 100%;
+    height: 300px;
+    background: #f8f9fa;
+    border: 2px dashed #dee2e6;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6c757d;
+    font-size: 1.1rem;
+    text-align: center;
+    padding: 20px;
+}
+
+.result-info {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.info-card {
+    background: white;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+.info-card h4 {
+    color: #495057;
+    margin-bottom: 10px;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.score-display {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #4285f4;
+    text-align: center;
+    padding: 20px;
+    background: linear-gradient(135deg, rgba(66, 133, 244, 0.1) 0%, rgba(52, 168, 83, 0.1) 100%);
+    border-radius: 10px;
+}
+
+.prediction-text {
+    font-size: 1.2rem;
+    color: #495057;
+    line-height: 1.6;
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 8px;
+    border-left: 4px solid #4285f4;
+    text-align: center;
+    font-weight: 600;
+}
+
+.error-message {
+    color: #d93025;
+    background: #fce8e6;
+    padding: 15px;
+    border-radius: 8px;
+    border: 1px solid #f5c6cb;
+    margin: 10px 0;
+}
+
+.canvas-size-info {
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 5px;
+}
+
+.download-btn {
+    background: #34a853;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    margin-top: 10px;
+    transition: all 0.3s ease;
+}
+
+.download-btn:hover {
+    background: #137333;
+    transform: translateY(-2px);
+}
+
+@media (max-width: 1200px) {
+    .main-content {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .result-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .main-content {
+        padding: 20px;
+    }
+    
+    .header h1 {
+        font-size: 2rem;
+    }
+    
+    .controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .control-group {
+        justify-content: space-between;
+    }
+}