Hugging Face's logo

Spaces:
ritz26
/
virtual-try-on-v2
Runtime error

App Files Community
ritz26 commited on
Commit
8668b16
·
verified ·
1 Parent(s): b7dd971

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +76 -0
templates/index.html ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Virtual Fashion Try-On</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ </head>
9
+
10
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center py-10">
11
+
12
+ <h1 class="text-4xl font-bold text-blue-400 mb-10">Virtual Fashion Try-On</h1>
13
+
14
+ <form action="/" method="post" enctype="multipart/form-data" class="w-full max-w-4xl bg-gray-800 rounded-2xl shadow-lg p-8 space-y-6">
15
+
16
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
17
+ <!-- Person Image Upload -->
18
+ <div>
19
+ <h2 class="text-lg font-semibold mb-2">Upload your photo</h2>
20
+ <label for="person_image" class="flex flex-col items-center justify-center border-2 border-dashed border-gray-600 rounded-xl p-6 hover:bg-gray-700 cursor-pointer relative">
21
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
22
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16v4m0 0h10m-10 0v-4m0 0h10m-10 0V5m0 0h10m-10 0H5m14 0h-2" />
23
+ </svg>
24
+ <p class="text-gray-400">Drag & drop or click to upload</p>
25
+ <input id="person_image" type="file" name="person_image" class="hidden" required onchange="showFileName('person_image', 'person_filename')">
26
+ </label>
27
+ <p id="person_filename" class="text-green-400 text-sm mt-2 text-center"></p>
28
+ </div>
29
+
30
+ <!-- T-Shirt Image Upload -->
31
+ <div>
32
+ <h2 class="text-lg font-semibold mb-2">Upload garment image</h2>
33
+ <label for="tshirt_image" class="flex flex-col items-center justify-center border-2 border-dashed border-gray-600 rounded-xl p-6 hover:bg-gray-700 cursor-pointer relative">
34
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
35
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16v4m0 0h10m-10 0v-4m0 0h10m-10 0V5m0 0h10m-10 0H5m14 0h-2" />
36
+ </svg>
37
+ <p class="text-gray-400">Drag & drop or click to upload</p>
38
+ <input id="tshirt_image" type="file" name="tshirt_image" class="hidden" required onchange="showFileName('tshirt_image', 'tshirt_filename')">
39
+ </label>
40
+ <p id="tshirt_filename" class="text-green-400 text-sm mt-2 text-center"></p>
41
+ </div>
42
+ </div>
43
+
44
+ <!-- Submit Button -->
45
+ <div class="flex justify-center">
46
+ <button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-semibold py-3 px-8 rounded-xl shadow-md transition">
47
+ 🚀 Perform Virtual Try-On
48
+ </button>
49
+ </div>
50
+
51
+ </form>
52
+
53
+ {% if result_img %}
54
+ <div class="w-full max-w-4xl mt-10 bg-gray-800 rounded-2xl shadow-lg p-8">
55
+ <h2 class="text-2xl font-bold mb-6 text-center">🎉 Your Virtual Try-On Result</h2>
56
+ <div class="flex justify-center">
57
+ <img src="{{ url_for('static', filename=result_img) }}" alt="Result Image" class="rounded-xl shadow-lg w-full max-w-md">
58
+ </div>
59
+ </div>
60
+ {% endif %}
61
+
62
+ <script>
63
+ function showFileName(inputId, filenameId) {
64
+ const input = document.getElementById(inputId);
65
+ const filename = document.getElementById(filenameId);
66
+ if (input.files.length > 0) {
67
+ filename.textContent = "✔️ " + input.files[0].name + " uploaded";
68
+ } else {
69
+ filename.textContent = "";
70
+ }
71
+ }
72
+ </script>
73
+
74
+ </body>
75
+
76
+ </html>