生成AIで作成しました。カラーコードで画像を生成します。
作成物
カラーコードで画像を生成する
作業
生成AI:ChatGPTの無料版
入力したプロンプト
画像作成
- 1回目入力プロンプト
webページを作成します。 ページの機能は、カラーコードを指定して、画像を生成します。 htmlのコードを作成してください。
- 2回目入力プロンプト
画像のサイズを設定できるようにテキストボックスを追加してください。
- 3回目入力プロンプト
生成した画像を保存するボタンを追加してください。
- 4回目入力プロンプト
保存するときにそのサイズ通りに保存できるようにしてもらえますか。
- 5回目入力プロンプト
新しく生成した際、前回の分を削除するようしてください。
ここでは、対応するjavascript部分だけ出力されました。
上記の作成物はここまで
- 6回目入力プロンプト
メタル光沢の設定ができるよう追加してください。
- 7回目入力プロンプト
メタル光沢の設定をチェックボックスで行えるように修正いただけますか。
- 8回目入力プロンプト
すみません。生成されないです。以下のエラーが出力されました。 Uncaught TypeError: document.getElementById(...) is null
- 9回目入力プロンプト
idを修正したhtmlコードの部分を作成いただけますか。
- 10回目入力プロンプト
javascriptの部分も参照できるように再構成してください。
出力
<!DOCTYPE html>
<html>
<head>
<title>カラーコードで画像を生成する</title>
</head>
<body>
<h1>カラーコードで画像を生成する</h1>
<form>
<label for="color">カラーコード：</label>
<input type="text" id="color" name="color">
<br>
<label for="width">画像の幅：</label>
<input type="text" id="width" name="width" value="100">
<br>
<label for="height">画像の高さ：</label>
<input type="text" id="height" name="height" value="100">
<br>
<button type="button" onclick="generateImage()">画像を生成する</button>
</form>
<div id="image-container"></div>
<script>
function generateImage() {
const colorCode = document.getElementById("color").value;
const canvas = document.createElement("canvas");
canvas.width = document.getElementById("width").value;
canvas.height = document.getElementById("height").value;
const ctx = canvas.getContext("2d");
ctx.fillStyle = colorCode;
ctx.fillRect(0, 0, canvas.width, canvas.height);
const img = document.createElement("img");
img.src = canvas.toDataURL();
// remove previous image and download button
const imageContainer = document.getElementById("image-container");
while (imageContainer.firstChild) {
imageContainer.removeChild(imageContainer.firstChild);
}
// add new image and download button
imageContainer.appendChild(img);
const downloadBtn = document.createElement("a");
downloadBtn.textContent = "画像を保存する";
downloadBtn.download = "generated_image.png";
canvas.toBlob((blob) => {
downloadBtn.href = URL.createObjectURL(blob);
imageContainer.appendChild(downloadBtn);
}, "image/png");
}
</script>
</body>
</html>
調整
上記回数
メタル光沢追加
画像にメタル感を付ける機能を追加しました。
メタル光沢追加
- 6回目入力プロンプト
メタル光沢の設定ができるよう追加してください。
- 7回目入力プロンプト
メタル光沢の設定をチェックボックスで行えるように修正いただけますか。
- 8回目入力プロンプト
すみません。生成されないです。以下のエラーが出力されました。 Uncaught TypeError: document.getElementById(...) is null
- 9回目入力プロンプト
idを修正したhtmlコードの部分を作成いただけますか。
- 10回目入力プロンプト
javascriptの部分も参照できるように再構成してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Image Generator</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.8.0/dist/tf.min.js"></script>
<script src="script.js"></script>
<style>
body {
font-family: sans-serif;
text-align: center;
padding-top: 50px;
}
h1 {
margin-bottom: 20px;
}
label {
display: inline-block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"] {
padding: 5px;
margin-left: 10px;
margin-bottom: 10px;
width: 60px;
text-align: center;
border-radius: 5px;
border: none;
background-color: #f2f2f2;
}
input[type="range"] {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
input[type="checkbox"] {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
img {
margin-top: 20px;
border: 1px solid #ddd;
padding: 5px;
background-color: #fff;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1>Color Image Generator</h1>
<label>Color code:</label>
<input type="text" id="colorCode" value="#ff0000">
<br>
<label>Image size:</label>
<input type="text" id="imageSize" value="200">
<br>
<label>Shininess:</label>
<input type="range" id="shininess" min="0" max="100" value="50">
<br>
<label>Metallic:</label>
<input type="checkbox" id="metallic">
<br>
<button onclick="generateImage()">Generate Image</button>
<button onclick="saveImage()">Save Image</button>
<div id="result"></div>
<script>
async function generateImage() {
const colorCode = document.getElementById("colorCode").value;
const imageSize = parseInt(document.getElementById("imageSize").value);
const shininess = parseInt(document.getElementById("shininess").value);
const metallic = document.getElementById("metallic").checked;
if (isNaN(imageSize) || imageSize <= 0) {
alert("Please enter a valid image size.");
return;
}
// Create a new canvas element
const canvas = document.createElement("canvas");
canvas.width = imageSize;
canvas.height = imageSize;
// Set the color of the canvas
const ctx = canvas.getContext("2d");
ctx.fillStyle = colorCode;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add shininess effect
if (shininess > 0) {
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, "rgba(255, 255, 255, 0.6)");
gradient.addColorStop(0.4, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0.6, "rgba(0, 0, 0, 0)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0.6)");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// Add metallic effect
if (metallic) {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
data[i] = data[i] * 0.8 + 50;
data[i + 1] = data[i + 1] * 0.8 + 50;
data[i + 2] = data[i + 2] * 0.8 + 50;
}
ctx.putImageData(imageData, 0, 0);
}
// Display the image on the page
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `<img src="${canvas.toDataURL()}">`;
}
function saveImage() {
const imgSrc = document.querySelector("img").getAttribute("src");
const link = document.createElement("a");
link.href = imgSrc;
link.download = "color_image.png";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
コメント