Hugging Face's logo

Spaces:
Wiuhh
/
Sketch_AI
Sleeping

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

Delete templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +0 -180
templates/index.html DELETED
@@ -1,180 +0,0 @@
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">free</p>
175
- </footer>
176
- </div>
177
-
178
- <script src="{{ url_for('static', filename='js/app.js') }}"></script>
179
- </body>
180
- </html>