File size: 6,349 Bytes
fb9623a 58db7c5 fb9623a 58db7c5 fb9623a ed89bc8 fb9623a |
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compliment Bot 💖</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/index.min.js"></script> -->
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
max-width: 400px;
width: 100%;
}
#headshot {
max-width: 300px;
max-height: 300px;
margin: 20px auto;
display: block;
}
#compliment {
font-size: 18px;
font-weight: bold;
color: #4a4a4a;
min-height: 50px;
}
.loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto;
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#uploadButton {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1> Compliment Bot 💖</h1>
<input type="file" id="fileInput" accept="image/*" style="display: none;">
<button id="uploadButton">Upload New Headshot</button>
<br><br>
<img id="headshot" src="" alt="Your headshot" style="display:none;">
<div class="loader" id="loader"></div>
<p id="compliment"></p>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');
const headshot = document.getElementById('headshot');
const compliment = document.getElementById('compliment');
const loader = document.getElementById('loader');
const SYSTEM_PROMPT = `
You are helpful assistant that gives the best compliments to people.
You will be given a caption of someone's headshot.
Based on that caption, provide a one sentence compliment to the person in the image.
Make sure you compliment the person in the image and not any objects or scenery.
Do NOT include any hashtags in your compliment or phrases like (emojis: dog, smiling face with heart-eyes, sun).
Here are some examples of the desired behavior:
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.
Compliment: Your smile is as bright as a lighthouse, lighting up the world around you. 🌟
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.
Compliment: You are the epitome of elegance and grace, with a style that is as timeless as your beauty. 💃🎩
Conversation begins below:
`
uploadButton.addEventListener('click', function() {
fileInput.click();
});
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
headshot.src = event.target.result;
headshot.style.display = 'block';
generateCompliment(file);
}
reader.readAsDataURL(file);
}
});
async function generateCompliment(file) {
compliment.textContent = '';
loader.style.display = 'block';
try {
const client_lib = await import("https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/index.min.js");
const Client = client_lib.Client;
const handle_file = client_lib.handle_file;
const captioning_space = await Client.connect("gokaygokay/SD3-Long-Captioner");
const llm_space = await Client.connect("hysts/zephyr-7b");
const caption = await captioning_space.predict("/create_captions_rich", { image: file });
console.info("Caption", caption.data);
const submission = llm_space.submit("/chat", {
system_prompt: SYSTEM_PROMPT,
message: `Caption: ${caption.data}\nCompliment: `,
max_new_tokens: 256,
temperature: 0.7,
top_p: 0.95,
top_k: 50,
repetition_penalty: 1,
}
)
for await (const msg of submission) {
loader.style.display = 'none';
if (msg.type === "data") {
console.log("msg.data", msg.data);
compliment.textContent = msg.data[0]
}
}
} catch (error) {
console.error('Error:', error);
loader.style.display = 'none';
compliment.textContent = "Oops! We couldn't generate a compliment. You're still awesome though!"
}
}
</script>
</body>
</html> |