Hugging Face's logo

Spaces:
ChetanSaifsAi
/
Ai-cloths-changer-template
Running

App Files Community
ChetanSaifsAi commited on
Commit
73add98
·
verified ·
1 Parent(s): c143a85

link update

Browse files
Files changed (1) hide show
  1. index.html +77 -77
index.html CHANGED
@@ -1,78 +1,78 @@
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>AI Clothes Changer - Try Virtual Clothing</title>
7
- <meta name="description" content="Transform your outfits virtually with AI technology">
8
- <link rel="stylesheet" href="styles.css">
9
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
10
- </head>
11
- <body>
12
- <div id="app">
13
- <div class="page-container">
14
- <div class="main-content">
15
- <h1>AI Clothes Changer</h1>
16
- <div class="title-underline"></div>
17
- <p class="subtitle">Transform your outfits virtually with AI technology</p>
18
-
19
- <div class="upload-container">
20
- <div class="upload-section">
21
- <div class="upload-box">
22
- <div class="upload-icon">
23
- <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
24
- <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="#6366f1" stroke-width="1.5"/>
25
- <path d="M20 21C20 16.5817 16.4183 13 12 13C7.58172 13 4 16.5817 4 21" stroke="#6366f1" stroke-width="1.5"/>
26
- </svg>
27
- </div>
28
- <h3>Upload Your Photo</h3>
29
- <p class="upload-text">or drag and drop</p>
30
- <input type="file" @change="handlePersonImageUpload" accept="image/*" ref="personFileInput" class="file-input">
31
- <button @click="triggerPersonFileInput" class="choose-file-btn">Choose File</button>
32
- </div>
33
- </div>
34
-
35
- <div class="controls-section">
36
- <select v-model="selectedBodyPart" class="body-part-select">
37
- <option value="">Upper Body</option>
38
- <option value="shirt">Shirt</option>
39
- <option value="jacket">Jacket</option>
40
- <option value="dress">Dress</option>
41
- </select>
42
- <a href="https://saifs.ai/ai-cloth-changer" class="try-on-btn">
43
- <span class="try-on-icon">✨</span>
44
- Try On
45
- </a>
46
- </div>
47
-
48
- <div class="upload-section">
49
- <div class="upload-box">
50
- <div class="upload-icon">
51
- <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
52
- <path d="M3 7L9 4L15 7L21 4V17L15 20L9 17L3 20V7Z" stroke="#6366f1" stroke-width="1.5"/>
53
- <path d="M9 4V17M15 7V20" stroke="#6366f1" stroke-width="1.5"/>
54
- </svg>
55
- </div>
56
- <h3>Upload Garment</h3>
57
- <p class="upload-text">Click here or drag and drop</p>
58
- <input type="file" @change="handleGarmentImageUpload" accept="image/*" ref="garmentFileInput" class="file-input">
59
- <button @click="triggerGarmentFileInput" class="choose-file-btn">Choose File</button>
60
- </div>
61
- </div>
62
- </div>
63
-
64
- <div class="pro-section">
65
- <div class="pro-divider">
66
- <span>For Professional Features</span>
67
- </div>
68
- <a href="https://saifs.ai/ai-cloth-changer" class="pro-btn">
69
- <span class="pro-icon">⭐</span>
70
- Try Pro Version
71
- </a>
72
- </div>
73
- </div>
74
- </div>
75
- </div>
76
- <script src="app.js"></script>
77
- </body>
78
  </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>AI Clothes Changer - Try Virtual Clothing</title>
7
+ <meta name="description" content="Transform your outfits virtually with AI technology">
8
+ <link rel="stylesheet" href="styles.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
10
+ </head>
11
+ <body>
12
+ <div id="app">
13
+ <div class="page-container">
14
+ <div class="main-content">
15
+ <h1>AI Clothes Changer</h1>
16
+ <div class="title-underline"></div>
17
+ <p class="subtitle">Transform your outfits virtually with AI technology</p>
18
+
19
+ <div class="upload-container">
20
+ <div class="upload-section">
21
+ <div class="upload-box">
22
+ <div class="upload-icon">
23
+ <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
24
+ <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="#6366f1" stroke-width="1.5"/>
25
+ <path d="M20 21C20 16.5817 16.4183 13 12 13C7.58172 13 4 16.5817 4 21" stroke="#6366f1" stroke-width="1.5"/>
26
+ </svg>
27
+ </div>
28
+ <h3>Upload Your Photo</h3>
29
+ <p class="upload-text">or drag and drop</p>
30
+ <input type="file" @change="handlePersonImageUpload" accept="image/*" ref="personFileInput" class="file-input">
31
+ <button @click="triggerPersonFileInput" class="choose-file-btn">Choose File</button>
32
+ </div>
33
+ </div>
34
+
35
+ <div class="controls-section">
36
+ <select v-model="selectedBodyPart" class="body-part-select">
37
+ <option value="">Upper Body</option>
38
+ <option value="shirt">Shirt</option>
39
+ <option value="jacket">Jacket</option>
40
+ <option value="dress">Dress</option>
41
+ </select>
42
+ <a href="https://saifs.ai/ai-cloth-changer" target="_blank" class="try-on-btn">
43
+ <span class="try-on-icon">✨</span>
44
+ Try On
45
+ </a>
46
+ </div>
47
+
48
+ <div class="upload-section">
49
+ <div class="upload-box">
50
+ <div class="upload-icon">
51
+ <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
52
+ <path d="M3 7L9 4L15 7L21 4V17L15 20L9 17L3 20V7Z" stroke="#6366f1" stroke-width="1.5"/>
53
+ <path d="M9 4V17M15 7V20" stroke="#6366f1" stroke-width="1.5"/>
54
+ </svg>
55
+ </div>
56
+ <h3>Upload Garment</h3>
57
+ <p class="upload-text">Click here or drag and drop</p>
58
+ <input type="file" @change="handleGarmentImageUpload" accept="image/*" ref="garmentFileInput" class="file-input">
59
+ <button @click="triggerGarmentFileInput" class="choose-file-btn">Choose File</button>
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ <div class="pro-section">
65
+ <div class="pro-divider">
66
+ <span>For Professional Features</span>
67
+ </div>
68
+ <a href="https://saifs.ai/ai-cloth-changer" target="_blank" class="pro-btn">
69
+ <span class="pro-icon">⭐</span>
70
+ Try Pro Version
71
+ </a>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ <script src="app.js"></script>
77
+ </body>
78
  </html>