Hugging Face's logo

Spaces:
Saad4web
/
tfjs-pa
Running

App Files Community
Saad4web commited on
Commit
517a968
·
verified ·
1 Parent(s): ac9755f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +180 -33
index.html CHANGED
@@ -1,53 +1,200 @@
1
  <!DOCTYPE html>
2
- <html lang="ar" dir="rtl">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>محول ماين كرافت (Pix2Pix)</title>
7
  <style>
8
- body { font-family: sans-serif; text-align: center; background-color: #f0f0f0; margin: 0; padding: 20px; }
9
- .container { max-width: 900px; margin: auto; padding: 20px; background-color: white; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.1); }
10
- h1 { color: #333; }
11
- .controls, .results { margin-bottom: 20px; }
12
- canvas, img { max-width: 100%; border: 2px solid #ddd; border-radius: 4px; image-rendering: pixelated; } /* Added pixelated rendering */
13
- button, input { padding: 10px; font-size: 16px; margin: 5px; }
14
- button { cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 4px; }
15
- button:disabled { background-color: #ccc; cursor: not-allowed; }
16
- #status { margin-top: 15px; font-weight: bold; color: #555; height: 25px; }
17
- .image-grid { display: flex; justify-content: space-around; align-items: center; }
18
- .image-container { display: flex; flex-direction: column; align-items: center; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </style>
20
  </head>
21
  <body>
22
  <div class="container">
23
- <h1>🎨 محول صور ماين كرافت - نسخة Pix2Pix الاحترافية</h1>
24
 
25
- <div class="controls">
26
- <p>اختر صورة مشوهة (يفضل أن تشبه بلوكات ماين كرافت) لتحسينها</p>
27
- <input type="file" id="imageUpload" accept="image/*">
 
 
28
  </div>
29
 
30
- <p id="status">⏳ فضلاً، انتظر تحميل النموذج...</p>
31
-
32
- <div class="results">
33
- <div class="image-grid">
34
- <div class="image-container">
35
- <h3>الصورة الأصلية</h3>
36
- <img id="originalImage" style="display:none;">
37
- <canvas id="inputCanvas" width="256" height="256"></canvas>
38
- </div>
39
- <div class="image-container">
40
- <h3>النتيجة المُحسَّنة</h3>
41
- <canvas id="outputCanvas" width="256" height="256"></canvas>
42
- </div>
 
 
 
 
 
 
 
 
 
 
 
43
  </div>
44
  </div>
45
  </div>
46
 
47
- <!-- استيراد مكتبة TensorFlow.js -->
48
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
49
 
50
- <!-- ربط ملف الجافاسكريبت الخاص بنا -->
51
- <script src="app.js"></script>
52
  </body>
53
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pix2Pix Image-to-Image Translation</title>
7
  <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ min-height: 100vh;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ color: #333;
22
+ }
23
+
24
+ .container {
25
+ background: rgba(255, 255, 255, 0.95);
26
+ backdrop-filter: blur(10px);
27
+ border-radius: 20px;
28
+ padding: 40px;
29
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
30
+ max-width: 800px;
31
+ width: 90%;
32
+ text-align: center;
33
+ }
34
+
35
+ h1 {
36
+ margin-bottom: 30px;
37
+ color: #4a5568;
38
+ font-size: 2.5rem;
39
+ font-weight: 300;
40
+ }
41
+
42
+ .file-input-wrapper {
43
+ margin-bottom: 30px;
44
+ position: relative;
45
+ display: inline-block;
46
+ }
47
+
48
+ #fileInput {
49
+ display: none;
50
+ }
51
+
52
+ .file-input-label {
53
+ display: inline-block;
54
+ padding: 12px 30px;
55
+ background: linear-gradient(45deg, #667eea, #764ba2);
56
+ color: white;
57
+ border-radius: 50px;
58
+ cursor: pointer;
59
+ transition: all 0.3s ease;
60
+ font-weight: 500;
61
+ box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
62
+ }
63
+
64
+ .file-input-label:hover {
65
+ transform: translateY(-2px);
66
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
67
+ }
68
+
69
+ #status {
70
+ margin: 20px 0;
71
+ padding: 15px;
72
+ background: rgba(243, 244, 246, 0.8);
73
+ border-radius: 10px;
74
+ font-weight: 500;
75
+ color: #4a5568;
76
+ min-height: 50px;
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
80
+ border-left: 4px solid #667eea;
81
+ }
82
+
83
+ .canvas-container {
84
+ display: flex;
85
+ justify-content: center;
86
+ gap: 40px;
87
+ margin-top: 30px;
88
+ flex-wrap: wrap;
89
+ }
90
+
91
+ .canvas-wrapper {
92
+ display: flex;
93
+ flex-direction: column;
94
+ align-items: center;
95
+ margin-bottom: 20px;
96
+ }
97
+
98
+ .canvas-label {
99
+ margin-bottom: 10px;
100
+ font-weight: 600;
101
+ color: #4a5568;
102
+ font-size: 1.1rem;
103
+ }
104
+
105
+ canvas {
106
+ border: 3px solid #e2e8f0;
107
+ border-radius: 15px;
108
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
109
+ transition: all 0.3s ease;
110
+ background: white;
111
+ }
112
+
113
+ canvas:hover {
114
+ transform: scale(1.02);
115
+ box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
116
+ }
117
+
118
+ .loading {
119
+ color: #667eea;
120
+ font-weight: 600;
121
+ }
122
+
123
+ .success {
124
+ color: #48bb78;
125
+ font-weight: 600;
126
+ }
127
+
128
+ .error {
129
+ color: #f56565;
130
+ font-weight: 600;
131
+ }
132
+
133
+ .processing {
134
+ color: #ed8936;
135
+ font-weight: 600;
136
+ }
137
+
138
+ @media (max-width: 768px) {
139
+ .canvas-container {
140
+ flex-direction: column;
141
+ gap: 20px;
142
+ }
143
+
144
+ h1 {
145
+ font-size: 2rem;
146
+ }
147
+
148
+ .container {
149
+ padding: 20px;
150
+ margin: 20px;
151
+ }
152
+ }
153
  </style>
154
  </head>
155
  <body>
156
  <div class="container">
157
+ <h1>Pix2Pix Image Translation</h1>
158
 
159
+ <div class="file-input-wrapper">
160
+ <input type="file" id="modelInput" accept=".json">
161
+ <label for="modelInput" class="file-input-label">
162
+ 🧠 Upload Model JSON
163
+ </label>
164
  </div>
165
 
166
+ <div class="file-input-wrapper">
167
+ <input type="file" id="weightsInput" accept=".bin" multiple>
168
+ <label for="weightsInput" class="file-input-label">
169
+ ⚖️ Upload Weight Files (.bin)
170
+ </label>
171
+ </div>
172
+
173
+ <div class="file-input-wrapper" style="margin-bottom: 30px;">
174
+ <input type="file" id="fileInput" accept="image/*" disabled>
175
+ <label for="fileInput" class="file-input-label" style="opacity: 0.5;">
176
+ 📸 Upload Image (Load model first)
177
+ </label>
178
+ </div>
179
+
180
+ <div id="status" class="loading">Please upload model files (model.json and .bin files) to begin</div>
181
+
182
+ <div class="canvas-container">
183
+ <div class="canvas-wrapper">
184
+ <div class="canvas-label">Input Image</div>
185
+ <canvas id="inputCanvas" width="256" height="256"></canvas>
186
+ </div>
187
+ <div class="canvas-wrapper">
188
+ <div class="canvas-label">Generated Output</div>
189
+ <canvas id="outputCanvas" width="256" height="256"></canvas>
190
  </div>
191
  </div>
192
  </div>
193
 
194
+ <!-- TensorFlow.js CDN -->
195
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
196
 
197
+ <!-- Main application script -->
198
+ <script src="app.js" defer></script>
199
  </body>
200
  </html>