Hugging Face's logo

Spaces:
DucLai
/
Sketch2Render
Running

App Files Community
DucLai commited on
Commit
eff76f2
·
verified ·
1 Parent(s): a9ff67c

Upload 3 files

Browse files
Files changed (1) hide show
  1. index.html +91 -19
index.html CHANGED
@@ -1,19 +1,91 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sketch to Render - Art AI</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <div class="header">
12
+ <h1>🎨 Sketch to Render</h1>
13
+ <p>Bạn Vẽ Nét - AI Đoán Hết !</p>
14
+ </div>
15
+
16
+ <div class="main-content">
17
+ <div class="drawing-section">
18
+ <div class="canvas-container">
19
+ <canvas id="drawingCanvas" width="500" height="400"></canvas>
20
+ <div class="canvas-size-info">Canvas: 500x400px</div>
21
+ </div>
22
+
23
+ <div class="controls">
24
+ <div class="control-group">
25
+ <label for="brushSize">Kích thước:</label>
26
+ <input type="range" id="brushSize" min="1" max="50" value="5">
27
+ <span id="brushSizeValue">5px</span>
28
+ </div>
29
+
30
+ <div class="control-group">
31
+ <label for="brushColor">Màu sắc:</label>
32
+ <input type="color" id="brushColor" value="#000000">
33
+ </div>
34
+
35
+ <button class="btn btn-secondary" id="clearCanvas">🗑️ Xóa</button>
36
+ <button class="btn btn-secondary" id="undoBtn">↶ Undo</button>
37
+ </div>
38
+ </div>
39
+
40
+ <div class="results-section">
41
+ <div class="generate-section">
42
+ <h3><span class="gemini-logo">🤖</span> S2R AI</h3>
43
+ <button class="btn btn-primary" id="generateBtn">✨ Phân tích & Tạo render</button>
44
+ </div>
45
+
46
+ <div class="render-results">
47
+ <h3>🖼️ Kết quả AI</h3>
48
+
49
+ <div class="loading" id="loading">
50
+ <div class="loading-spinner"></div>
51
+ <p>S2R AI đang phân tích sketch của bạn...</p>
52
+ <small>Đang tạo ảnh render từ sketch</small>
53
+ </div>
54
+
55
+ <div class="result-content" id="resultContent">
56
+ <div class="result-grid">
57
+ <div class="rendered-image-container">
58
+ <h4>🎨 Ảnh render được tạo</h4>
59
+ <div id="imageContainer">
60
+ <div class="image-placeholder">
61
+ Ảnh render sẽ được tạo từ sketch và hiển thị ở đây
62
+ </div>
63
+ </div>
64
+ <button class="download-btn" id="downloadBtn" style="display: none;">
65
+ 📥 Tải ảnh xuống
66
+ </button>
67
+ </div>
68
+
69
+ <div class="result-info">
70
+ <div class="info-card">
71
+ <h4>📊 Điểm số phác họa</h4>
72
+ <div class="score-display" id="scoreDisplay">-/10</div>
73
+ </div>
74
+
75
+ <div class="info-card">
76
+ <h4>🔍 Nhận diện</h4>
77
+ <div class="prediction-text" id="predictionText">Chưa có kết quả</div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <div id="errorMessage" class="error-message" style="display: none;"></div>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <script src="script.js"></script>
90
+ </body>
91
+ </html>