|
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"<!DOCTYPE html> |
|
<meta |
|
name="description" |
|
content="A playground for text to image generation." |
|
/> |
|
<meta name="author" content="Manikanta" /> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<title>Text to Imgage generation</title> |
|
|
|
<link |
|
rel="stylesheet" |
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" |
|
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" |
|
crossorigin="anonymous" |
|
referrerpolicy="no-referrer" |
|
/> |
|
|
|
|
|
<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=Grandstander:ital,wght@0,100..900;1,100..900&display=swap" |
|
rel="stylesheet" |
|
/> |
|
|
|
<link rel="stylesheet" href="style.css" /> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<div class="form-container"> |
|
<div class="logo"> |
|
<i |
|
class="fa-solid fa-draw-polygon" |
|
style="font-size: 3rem; color: blueviolet" |
|
></i> |
|
|
|
<h1>Text to Image</h1> |
|
</div> |
|
<label for="text">Create an image from text</label> |
|
<input type="text" id="text" /> |
|
|
|
<label for="yourKy" |
|
>Enter API Key: |
|
<span class="hint-icon" id="hint-icon" |
|
><i class="fas fa-question-circle"></i |
|
></span> |
|
</label> |
|
|
|
<div class="input-with-icon"> |
|
<input type="password" id="yourKy" /> |
|
<span class="toggle-password" id="toggle-password"> |
|
<i class="fa fa-eye-slash" aria-hidden="true"></i> |
|
</span> |
|
</div> |
|
|
|
<div class="hint-content" id="hint-content"> |
|
<p>Tokens entered in the input field are used only for temporary API requests and not saved in the application.</p> |
|
<br/> |
|
<h5>Get your API Key from Hugging Face:</h5> |
|
<br /> |
|
<ol> |
|
<li> |
|
<p>Sign up or log into your Hugging Face account.</p> |
|
</li> |
|
<li><p>Go to your account settings or dashboard.</p></li> |
|
<li> |
|
<p>Find the API tokens section and generate a new token.</p> |
|
</li> |
|
<li> |
|
<p>Copy the token and paste it into the input field above.</p> |
|
</li> |
|
</ol> |
|
</div> |
|
|
|
<label for="chooseModel" |
|
>Select a Model: |
|
<span class="hint-icon" id="model-hint-icon" |
|
><i class="fas fa-question-circle"></i |
|
></span> |
|
</label> |
|
<select id="chooseModel"> |
|
<option value="Melonie/text_to_image_finetuned"> |
|
Melonie/text_to_image_finetuned |
|
</option> |
|
<option value="mann-e/Mann-E_Dreams">mann-e/Mann-E_Dreams</option> |
|
|
|
<option value="alvdansen/midsommarcartoon"> |
|
alvdansen/midsommarcartoon |
|
</option> |
|
</select> |
|
|
|
|
|
<div class="hint-content" id="model-hint-content"> |
|
<div id="model-info"> |
|
<h5>Model info:</h5> |
|
<p id="model-info-text"></p> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div |
|
style=" |
|
display: flex; |
|
justify-content: space-around; |
|
align-items: center; |
|
gap: 20px; |
|
" |
|
> |
|
<button id="btn" class="primary-btn">Generate</button> |
|
<button id="downloadBtn" class="hidden secondary-btn">Download Image</button> |
|
</div> |
|
</div> |
|
|
|
<div class="result-container"> |
|
<div id="loader" class="hidden"></div> |
|
<img src="" alt="" id="img" /> |
|
|
|
<div id="history"> |
|
<div id="history-header"> |
|
<h3>History<span class="snakex">.</span></h3> |
|
|
|
<button |
|
class="saveHistory primary-btn" |
|
onclick="imageHistoryInstance.saveToLocalStorage()" |
|
> |
|
Save History |
|
</button> |
|
|
|
<button |
|
class="clearHistory secondary-btn" |
|
onclick="imageHistoryInstance.clearHistory()" |
|
> |
|
Clear History |
|
</button> |
|
</div> |
|
|
|
<div id="history-container"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<footer class="footer"> |
|
<p>© 2024 made by Manikanta.</p> |
|
</footer> |
|
|
|
<script src="_api.js"></script> |
|
<script src="_dom.js"></script> |
|
<script src="myClasses.js"></script> |
|
<script src="_helpers.js"></script> |
|
<script src="_events.js"></script> |
|
<script src="main.js"></script> |
|
</body> |
|
</html> |
|
|
