pratikshahp commited on
Commit
929036c
Β·
verified Β·
1 Parent(s): e191b23

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +152 -19
index.html CHANGED
@@ -1,19 +1,152 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>Compliment Bot πŸ’–</title>
7
+ <!-- <script src="https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/index.min.js"></script> -->
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+ height: 100vh;
15
+ margin: 0;
16
+ background-color: #f0f0f0;
17
+ }
18
+ .container {
19
+ text-align: center;
20
+ background-color: white;
21
+ padding: 20px;
22
+ border-radius: 10px;
23
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
24
+ max-width: 400px;
25
+ width: 100%;
26
+ }
27
+ #headshot {
28
+ max-width: 300px;
29
+ max-height: 300px;
30
+ margin: 20px auto;
31
+ display: block;
32
+ }
33
+ #compliment {
34
+ font-size: 18px;
35
+ font-weight: bold;
36
+ color: #4a4a4a;
37
+ min-height: 50px;
38
+ }
39
+ .loader {
40
+ border: 5px solid #f3f3f3;
41
+ border-top: 5px solid #3498db;
42
+ border-radius: 50%;
43
+ width: 30px;
44
+ height: 30px;
45
+ animation: spin 1s linear infinite;
46
+ margin: 20px auto;
47
+ display: none;
48
+ }
49
+ @keyframes spin {
50
+ 0% { transform: rotate(0deg); }
51
+ 100% { transform: rotate(360deg); }
52
+ }
53
+ #uploadButton {
54
+ background-color: #4CAF50;
55
+ border: none;
56
+ color: white;
57
+ padding: 10px 20px;
58
+ text-align: center;
59
+ text-decoration: none;
60
+ display: inline-block;
61
+ font-size: 16px;
62
+ margin: 4px 2px;
63
+ cursor: pointer;
64
+ border-radius: 5px;
65
+ }
66
+ </style>
67
+ </head>
68
+ <body>
69
+ <div class="container">
70
+ <h1> Compliment Bot πŸ’–</h1>
71
+ <input type="file" id="fileInput" accept="image/*" style="display: none;">
72
+ <button id="uploadButton">Upload New Headshot</button>
73
+ <br><br>
74
+ <img id="headshot" src="" alt="Your headshot" style="display:none;">
75
+ <div class="loader" id="loader"></div>
76
+ <p id="compliment"></p>
77
+ </div>
78
+
79
+ <script>
80
+ const fileInput = document.getElementById('fileInput');
81
+ const uploadButton = document.getElementById('uploadButton');
82
+ const headshot = document.getElementById('headshot');
83
+ const compliment = document.getElementById('compliment');
84
+ const loader = document.getElementById('loader');
85
+ const SYSTEM_PROMPT = `
86
+ You are helpful assistant that gives the best compliments to people.
87
+ You will be given a caption of someone's headshot.
88
+ Based on that caption, provide a one sentence compliment to the person in the image.
89
+ Make sure you compliment the person in the image and not any objects or scenery.
90
+ Do NOT include any hashtags in your compliment or phrases like (emojis: dog, smiling face with heart-eyes, sun).
91
+ Here are some examples of the desired behavior:
92
+ Caption: a front view of a man who is smiling, there is a lighthouse in the background, there is a grassy area on the left that is green and curved. in the distance you can see the ocean and the shore. there is a grey and cloudy sky above the lighthouse and the trees.
93
+ Compliment: Your smile is as bright as a lighthouse, lighting up the world around you. 🌟
94
+ Caption: in a close-up, a blonde woman with short, wavy hair, is the focal point of the image. she's dressed in a dark brown turtleneck sweater, paired with a black hat and a black suit jacket. her lips are a vibrant red, and her eyes are a deep brown. in the background, a man with a black hat and a white shirt is visible.
95
+ Compliment: You are the epitome of elegance and grace, with a style that is as timeless as your beauty. πŸ’ƒπŸŽ©
96
+ Conversation begins below:
97
+ `
98
+ uploadButton.addEventListener('click', function() {
99
+ fileInput.click();
100
+ });
101
+ fileInput.addEventListener('change', function(e) {
102
+ const file = e.target.files[0];
103
+ if (file) {
104
+ const reader = new FileReader();
105
+ reader.onload = function(event) {
106
+ headshot.src = event.target.result;
107
+ headshot.style.display = 'block';
108
+ generateCompliment(file);
109
+ }
110
+ reader.readAsDataURL(file);
111
+ }
112
+ });
113
+ async function generateCompliment(file) {
114
+ compliment.textContent = '';
115
+ loader.style.display = 'block';
116
+ try {
117
+ const client_lib = await import("https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/index.min.js");
118
+ const Client = client_lib.Client;
119
+ const handle_file = client_lib.handle_file;
120
+ const captioning_space = await Client.connect("gokaygokay/SD3-Long-Captioner");
121
+ const llm_space = await Client.connect("hysts/zephyr-7b");
122
+ const caption = await captioning_space.predict("/create_captions_rich", { image: file });
123
+
124
+
125
+ console.info("Caption", caption.data);
126
+
127
+ const submission = llm_space.submit("/chat", {
128
+ system_prompt: SYSTEM_PROMPT,
129
+ message: `Caption: ${caption.data}\nCompliment: `,
130
+ max_new_tokens: 256,
131
+ temperature: 0.7,
132
+ top_p: 0.95,
133
+ top_k: 50,
134
+ repetition_penalty: 1,
135
+ }
136
+ )
137
+ for await (const msg of submission) {
138
+ loader.style.display = 'none';
139
+ if (msg.type === "data") {
140
+ console.log("msg.data", msg.data);
141
+ compliment.textContent = msg.data[0]
142
+ }
143
+ }
144
+ } catch (error) {
145
+ console.error('Error:', error);
146
+ loader.style.display = 'none';
147
+ compliment.textContent = "Oops! We couldn't generate a compliment. You're still awesome though!"
148
+ }
149
+ }
150
+ </script>
151
+ </body>
152
+ </html>