-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (64 loc) · 4.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VisualPrompt - AI Image Generator</title>
<meta name="description"
content="VisualPrompt Image Generator - Unlock your creativity with AI-generated images. Write a prompt and watch the magic happen.">
<meta name="keywords" content="VisualPrompt, AI, Image Generator, Creative Coding">
<meta name="author" content="Kristoff (Chrystalio)">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://visual-prompt.chrystalio.dev">
<meta property="og:title" content="VisualPrompt Image Generator">
<meta property="og:description"
content="Unlock your creativity with AI-generated images. Write a prompt and watch the magic happen.">
<meta property="og:image" content="https://visual-prompt.chrystalio.dev">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://visual-prompt.chrystalio.dev">
<meta property="twitter:title" content="VisualPrompt Image Generator">
<meta property="twitter:description"
content="Unlock your creativity with AI-generated images. Write a prompt and watch the magic happen.">
<meta property="twitter:image" content="https://visual-prompt.chrystalio.dev/assets/images/visual-prompt.png">
<link rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🤖</text></svg>">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap"
rel="stylesheet">
</head>
<body class>
<div class="hero min-h-screen bg-gradient-to-tl from-rose-400 via-fuchsia-500 to-indigo-500">
<div class="m-5 p-4 lg:px-12 text-neutral-content backdrop-blur-sm border-1 rounded-3xl drop-shadow-lg bg-slate-800">
<div class="max-w-screen-md">
<h1 class="font-primary lg:text-3xl text-lg md:text-xl font-bold lg:mt-5 mb-2">VisualPrompt - AI Image Generator 🤖</h1>
<p class="text-slate-500 font-secondary text-sm">
Created by <a href="https://kristoff-dev.space" class="text-primary" target="_blank">Kristoff (Chrystalio)</a>
Powered By <a href="https://huggingface.co/" class="text-primary" target="_blank">HuggingFace</a> and <a
href="https://huggingface.co/segmind/SSD-1B" class="text-primary" target="_blank">segmind/SSD-1B</a>.
</p>
<p class="lg:mt-10 lg:mb-10 my-7 text-md md:text-lg lg:text-xl font-secondary text-clip">Welcome to VisualPrompt Image
Generator! Write your prompt below to bring your ideas to life through generated images. Get
creative and let your imagination flow. To get you started, here's an example of a simple prompt:
'<b>A serene sunset over a mountain lake.</b>' Enter your unique prompt, click 'Generate Image,' and
watch the magic unfold!</p>
<div>
<form action="" id="gen-form">
<input type="text" placeholder="Type Your Prompt Here" autocomplete="off" id="user-prompt" class="input input-bordered input-md w-full max-w-xl">
<button class="btn btn-md shadow-md px-15 my-4 lg:mx-6 btn-primary" id="generate-btn">Generate</button>
</form>
</div>
<div class="pt-10" id="result">
<div class="text-center pb-5 hidden text-clip" id="loading"><span class="loading loading-dots lg:loading-lg"></span></div>
<div class="grid grid-cols-3 gap-3" id="image-grid"></div>
</div>
</div>
</div>
</div>
<script src="assets/js/script.js"></script>
</body>
</html>