File size: 4,818 Bytes
ddf3d4e 45fbf9e 49f3912 45fbf9e 6e8cfca 45fbf9e 6e8cfca 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 |
<!doctype html>
<html>
<head>
<meta charset="utf-8"<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text to Img</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="token"
>Enter API Token:
<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="token" />
<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">
<h5>Get your API token 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>
<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>
|