Spaces:
Running
Running
File size: 9,422 Bytes
a19a45a 2e4ca03 b5fa1af 2e4ca03 725dd48 2e4ca03 725dd48 2e4ca03 725dd48 2e4ca03 725dd48 2e4ca03 26da075 2f90d6f b5fa1af 5a3b4d9 b5fa1af 5a3b4d9 26da075 5a3b4d9 26da075 5a3b4d9 26da075 5a3b4d9 26da075 04e2415 2e4ca03 04e2415 26da075 5a3b4d9 26da075 b5fa1af 032c863 b21484f 032c863 b21484f 032c863 b5fa1af a19a45a b5fa1af 6078258 5a3b4d9 e547b24 6078258 5a3b4d9 a19a45a 725dd48 5a3b4d9 a19a45a 032c863 5a3b4d9 a19a45a 5a3b4d9 a19a45a 5a3b4d9 a19a45a 5a3b4d9 a19a45a 5a3b4d9 a19a45a 5a3b4d9 b5fa1af a19a45a 5a3b4d9 0b591fa 2e4ca03 a19a45a |
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 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FLUX.1-Dev Image Generator</title>
<style>
#canvas {
position: absolute;
top: 0;
left: 0;
cursor: crosshair;
}
#container {
position: relative;
display: inline-block;
}
</style>
<script>
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let penSize = 5;
let penColor = '#000000';
function startDrawing(event) {
isDrawing = true;
[lastX, lastY] = getMousePos(event);
}
function draw(event) {
if (!isDrawing) return;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const [newX, newY] = getMousePos(event);
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(newX, newY);
ctx.strokeStyle = penColor;
ctx.lineWidth = penSize;
ctx.stroke();
ctx.closePath();
[lastX, lastY] = [newX, newY]; // 新しい位置を保存
}
function stopDrawing() {
isDrawing = false;
}
function getMousePos(event) {
const rect = document.getElementById('canvas').getBoundingClientRect();
return [event.clientX - rect.left, event.clientY - rect.top];
}
function setPenSize(value) {
penSize = value;
}
function setPenColor(value) {
penColor = value;
}
async function generateImage() {
const prompt = document.getElementById("prompt").value;
const negative_prompt = document.getElementById("negative_prompt").value;
const width = document.getElementById("width").value;
const height = document.getElementById("height").value;
const steps = document.getElementById("steps").value;
const cfgs = document.getElementById("cfgs").value;
const sampler = document.getElementById("sampler").value;
const strength = document.getElementById("strength").value;
const seed = document.getElementById("seed").value;
const button = document.getElementById("generate-button");
const errorMessage = document.getElementById("error-message");
button.disabled = true; // ボタンを無効化
errorMessage.textContent = ''; // エラーメッセージをクリア
const params = new URLSearchParams({
prompt,
negative_prompt,
width,
height,
steps,
cfgs,
sampler,
strength,
seed
});
const reqURL = `https://soiz-flux-1-dev-serverless.hf.space/generate?${params.toString()}`;
document.getElementById("reqURL").value = reqURL; // URLを設定
try {
const response = await fetch(reqURL);
if (!response.ok) {
const errorText = await response.text(); // エラーメッセージを取得
throw new Error(`画像生成に失敗しました: ${errorText}`);
}
const imageBlob = await response.blob();
const reader = new FileReader();
reader.onloadend = function () {
const img = document.getElementById("generated-image");
img.src = reader.result; // dataURLを設定
img.style.display = 'block'; // 画像を表示
// 画像をキャンバスに描画
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア
const imgElement = new Image();
imgElement.src = reader.result;
imgElement.onload = function () {
canvas.width = imgElement.width;
canvas.height = imgElement.height;
ctx.drawImage(imgElement, 0, 0);
};
};
reader.readAsDataURL(imageBlob);
} catch (error) {
errorMessage.textContent = error.message; // エラーメッセージを表示
console.error(error); // エラーをコンソールに出力
} finally {
button.disabled = false; // ボタンを再有効化
}
}
function syncWidth(value) {
document.getElementById("width-slider").value = value;
}
function syncHeight(value) {
document.getElementById("height-slider").value = value;
}
function updateWidthInput() {
const widthSlider = document.getElementById("width-slider");
const widthInput = document.getElementById("width");
widthInput.value = widthSlider.value;
}
function updateHeightInput() {
const heightSlider = document.getElementById("height-slider");
const heightInput = document.getElementById("height");
heightInput.value = heightSlider.value;
}
</script>
</head>
<body>
<h1>FLUX.1-Dev Image Generator</h1>
<form onsubmit="event.preventDefault(); generateImage();">
<label for="prompt">Prompt:</label><br>
<textarea id="prompt" name="prompt" rows="4" cols="50" placeholder="Enter your prompt" required>real, sky, blue, clouds, light blue, light blue sky, sun, 32K, many islands floating in the sky, Ghibli, many islands, many islands in the sky, islands in the clouds, old islands, fog, high quality, cool</textarea><br><br>
<label for="negative_prompt">Negative Prompt:</label><br>
<textarea id="negative_prompt" name="negative_prompt" rows="4" cols="50" placeholder="Enter negative prompt (optional)">(deformed, distorted, disfigured), poorly drawn, bad anatomy, wrong anatomy, extra limb, missing limb, floating limbs, (mutated hands and fingers), disconnected limbs, mutation, mutated, ugly, disgusting, blurry, amputation, misspellings, typos</textarea><br><br>
<label for="width">Width:</label>
<input type="number" id="width" name="width" value="1024" min="64" max="2048" step="8">
<input type="range" id="width-slider" name="width-slider" min="64" max="2048" value="1024" step="8" style="width:250px; display: inline-block;" oninput="updateWidthInput()"><br><br>
<label for="height">Height:</label>
<input type="number" id="height" name="height" value="1024" min="64" max="2048" step="8" oninput="syncHeight(this.value)">
<input type="range" id="height-slider" name="height-slider" min="64" max="2048" value="1024" step="8" style="width:250px; display: inline-block;" oninput="updateHeightInput()"><br><br>
<label for="steps">Sampling Steps:</label>
<input type="number" id="steps" name="steps" value="35"><br><br>
<label for="cfgs">CFG Scale:</label>
<input type="number" id="cfgs" name="cfgs" value="7"><br><br>
<label for="sampler">Sampling Method:</label>
<select id="sampler" name="sampler">
<option value="DPM++ 2M Karras">DPM++ 2M Karras</option>
<option value="DPM++ SDE Karras">DPM++ SDE Karras</option>
<option value="Euler">Euler</option>
<option value="Euler a">Euler a</option>
<option value="Heun">Heun</option>
<option value="DDIM">DDIM</option>
</select><br><br>
<label for="strength">Strength:</label>
<input type="number" id="strength" name="strength" value="0.7" step="0.01" min="0" max="1"><br><br>
<label for="seed">Seed:</label>
<input type="number" id="seed" name="seed" value="-1" step="1"><br><br>
<button type="submit" id="generate-button">Generate Image</button>
</form>
<p id="reqURL"></p>
<div id="error-message" style="color: red;"></div>
<h2>Generated Image:</h2>
<div id="container">
<canvas id="canvas"></canvas>
<img id="generated-image" src="" alt="Generated Image" style="max-width: 100%; height: auto; display: none;">
</div>
<h3>Draw on the Image:</h3>
<label for="penSize">Pen Size:</label>
<input type="range" id="penSize" name="penSize" min="1" max="50" value="5" oninput="setPenSize(this.value)">
<label for="penColor">Pen Color:</label>
<input type="color" id="penColor" name="penColor" value="#000000" onchange="setPenColor(this.value)">
<script>
// Canvasイベントリスナーを設定
const canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseleave', stopDrawing);
</script>
</body>
</html>
|