Hugging Face's logo

Spaces:
Wiuhh
/
Sketch_AI
Sleeping

App Files Community
Wiuhh commited on
Commit
e099b6d
·
verified ·
1 Parent(s): c9605d4

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +180 -0
templates/index.html ADDED
@@ -0,0 +1,180 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html class="dark" lang="en">
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6
+ <title>SketchAI - Image to Sketch Converter</title>
7
+ <link href="https://fonts.googleapis.com" rel="preconnect"/>
8
+ <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
9
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet"/>
10
+ <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: "class",
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ "primary": "hsl(265, 100%, 61%)",
18
+ "secondary": "hsl(327, 100%, 72%)",
19
+ "background": "hsl(240, 14%, 5%)",
20
+ "foreground": "hsl(240, 5%, 90%)",
21
+ "border-accent": "hsla(253, 100%, 72%, 0.15)"
22
+ },
23
+ fontFamily: {
24
+ "display": ["Space Grotesk", "sans-serif"]
25
+ },
26
+ borderRadius: {
27
+ "DEFAULT": "0.5rem",
28
+ "lg": "0.75rem",
29
+ "xl": "1rem",
30
+ "full": "9999px"
31
+ },
32
+ },
33
+ },
34
+ }
35
+ </script>
36
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
37
+ <style>
38
+ .dashed-border-gradient {
39
+ background-image: conic-gradient(from 180deg at 50% 50%, hsla(265, 100%, 61%, 0) 0deg, hsl(265, 100%, 61%) 60deg, hsl(327, 100%, 72%) 120deg, hsla(327, 100%, 72%, 0) 180deg, hsla(327, 100%, 72%, 0) 240deg, hsl(327, 100%, 72%) 300deg, hsl(265, 100%, 61%) 360deg);
40
+ background-repeat: no-repeat;
41
+ background-position: center;
42
+ animation: spin 5s linear infinite;
43
+ }
44
+ @keyframes spin {
45
+ from {
46
+ transform: rotate(0deg);
47
+ }
48
+ to {
49
+ transform: rotate(360deg);
50
+ }
51
+ }
52
+ .processing {
53
+ animation: pulse 2s ease-in-out infinite;
54
+ }
55
+ @keyframes pulse {
56
+ 0%, 100% {
57
+ opacity: 1;
58
+ }
59
+ 50% {
60
+ opacity: 0.5;
61
+ }
62
+ }
63
+ body {
64
+ min-height: max(884px, 100dvh);
65
+ }
66
+ </style>
67
+ </head>
68
+ <body class="bg-background text-foreground font-display">
69
+ <div class="relative flex flex-col min-h-screen w-full overflow-x-hidden">
70
+ <header class="flex items-center justify-center p-4 sm:p-6">
71
+ <div class="flex items-center gap-2">
72
+ <span class="material-symbols-outlined text-primary text-3xl">edit</span>
73
+ <h1 class="text-xl font-bold text-foreground">SketchAI</h1>
74
+ </div>
75
+ </header>
76
+
77
+ <main class="flex-1 flex flex-col items-center justify-center p-4 text-center">
78
+ <div class="max-w-md w-full flex flex-col items-center gap-8">
79
+ <div class="flex flex-col gap-4 items-center">
80
+ <h2 class="text-4xl md:text-5xl font-bold tracking-tight bg-gradient-to-r from-primary to-secondary text-transparent bg-clip-text">
81
+ Turn Photos into Sketches
82
+ </h2>
83
+ <p class="text-foreground/80 max-w-sm">
84
+ Upload your image and let our AI transform it into a beautiful pencil sketch drawing with artistic detail.
85
+ </p>
86
+ </div>
87
+
88
+ <!-- Upload Area -->
89
+ <div id="upload-area" class="relative w-full p-1 rounded-lg dashed-border-gradient">
90
+ <div class="flex flex-col items-center justify-center gap-6 rounded-lg bg-background p-8 sm:p-14">
91
+ <div class="flex items-center justify-center w-16 h-16 rounded-full bg-primary/20">
92
+ <span class="material-symbols-outlined text-primary text-4xl">upload_file</span>
93
+ </div>
94
+ <div class="flex flex-col items-center gap-2">
95
+ <p class="text-lg font-bold text-foreground">Drag & drop to upload</p>
96
+ <p class="text-sm text-foreground/60">or</p>
97
+ </div>
98
+ <input type="file" id="file-input" accept="image/*" class="hidden">
99
+ <button id="browse-btn" class="flex min-w-[120px] items-center justify-center rounded-full h-12 px-6 bg-primary text-white text-base font-bold transition-transform hover:scale-105">
100
+ <span>Browse Files</span>
101
+ </button>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Processing Area -->
106
+ <div id="processing-area" class="hidden w-full p-1 rounded-lg">
107
+ <div class="flex flex-col items-center justify-center gap-6 rounded-lg bg-background border border-primary/20 p-8">
108
+ <div class="flex items-center justify-center w-16 h-16 rounded-full bg-primary/20 processing">
109
+ <span class="material-symbols-outlined text-primary text-4xl">auto_awesome</span>
110
+ </div>
111
+ <div class="flex flex-col items-center gap-2">
112
+ <p class="text-lg font-bold text-foreground">Creating your sketch...</p>
113
+ <p class="text-sm text-foreground/60">This may take a few moments</p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Result Area -->
119
+ <div id="result-area" class="hidden w-full">
120
+ <div class="flex flex-col gap-6">
121
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
122
+ <!-- Original Image -->
123
+ <div class="flex flex-col gap-2">
124
+ <p class="text-sm font-bold text-foreground/80">Original</p>
125
+ <div class="rounded-lg border border-primary/20 overflow-hidden">
126
+ <img id="original-image" class="w-full h-auto max-h-64 object-cover" alt="Original image">
127
+ </div>
128
+ </div>
129
+ <!-- Sketch Result -->
130
+ <div class="flex flex-col gap-2">
131
+ <p class="text-sm font-bold text-foreground/80">Sketch</p>
132
+ <div class="rounded-lg border border-primary/20 overflow-hidden">
133
+ <img id="sketch-image" class="w-full h-auto max-h-64 object-cover" alt="Sketch result">
134
+ </div>
135
+ </div>
136
+ </div>
137
+ <div class="flex flex-col sm:flex-row gap-3 justify-center">
138
+ <button id="download-btn" class="flex items-center justify-center gap-2 rounded-full h-12 px-6 bg-primary text-white text-base font-bold transition-transform hover:scale-105">
139
+ <span class="material-symbols-outlined text-xl">download</span>
140
+ <span>Download Sketch</span>
141
+ </button>
142
+ <button id="new-upload-btn" class="flex items-center justify-center gap-2 rounded-full h-12 px-6 border border-primary text-primary text-base font-bold transition-transform hover:scale-105">
143
+ <span class="material-symbols-outlined text-xl">refresh</span>
144
+ <span>Try Another</span>
145
+ </button>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Settings -->
151
+ <div id="settings-area" class="hidden w-full">
152
+ <div class="flex flex-col gap-4 p-6 rounded-lg border border-primary/20 bg-background/50">
153
+ <h3 class="text-lg font-bold text-foreground">Sketch Options</h3>
154
+ <div class="flex flex-col gap-3">
155
+ <div class="flex items-center justify-between">
156
+ <label class="text-sm font-medium text-foreground/80">Blur Intensity</label>
157
+ <select id="blur-select" class="bg-background border border-primary/20 rounded px-3 py-1 text-foreground">
158
+ <option value="15">Light</option>
159
+ <option value="21" selected>Medium</option>
160
+ <option value="31">Strong</option>
161
+ </select>
162
+ </div>
163
+ <div class="flex items-center justify-between">
164
+ <label class="text-sm font-medium text-foreground/80">Enhanced Lines</label>
165
+ <input type="checkbox" id="enhance-check" class="w-4 h-4 text-primary bg-background border-primary/20 rounded focus:ring-primary">
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </main>
172
+
173
+ <footer class="p-4 text-center">
174
+ <p class="text-sm text-foreground/60">© 2024 SketchAI. All rights reserved.</p>
175
+ </footer>
176
+ </div>
177
+
178
+ <script src="{{ url_for('static', filename='js/app.js') }}"></script>
179
+ </body>
180
+ </html>