File size: 5,221 Bytes
ddf3d4e 45fbf9e fe6d25d 45fbf9e fe6d25d 45fbf9e 49f3912 45fbf9e 85c8716 45fbf9e bbe9c42 45fbf9e 85c8716 45fbf9e bbe9c42 85c8716 45fbf9e 6e8cfca 45fbf9e 6e8cfca 45fbf9e fe6d25d 45fbf9e |
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 166 |
<!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"
/>
<!-- =========================fonts========================= -->
<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>
<!-- keep same class for same style, only have different id -->
<div class="hint-content" id="model-hint-content">
<div id="model-info">
<h5>Model info:</h5>
<p id="model-info-text"></p>
</div>
</div>
<!-- test only -->
<!-- <button onclick="showHistory()">histry</button> -->
<!--<button
onclick="addToHistory('https://tse3.explicit.bing.net/th?id=OIP.iC2nXJ8sgDXaO8xp3X3izAHaE6&pid=Api&P=0&h=180')"
>
add to history
</button> -->
<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>
|