3×3 Hairstyle Prompt Generator
画面
3×3 Hairstyle Prompt Generator
Selected hairstyles: 0 / 9
Female Hairstyles
Male Hairstyles
プログラム
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3x3 Hairstyle Prompt Generator</title>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
h1 { font-size: 20px; margin-bottom: 10px; }
.section-title { margin-top: 20px; font-weight: bold; }
.hair-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hair-item { border: 1px solid #ccc; padding: 6px 8px; border-radius: 4px; font-size: 13px; }
.hair-item input { margin-right: 4px; }
button { padding: 8px 16px; font-size: 14px; cursor: pointer; margin-right: 10px; }
textarea { width: 100%; height: 420px; margin-top: 16px; font-size: 12px; font-family: Consolas, monospace; }
.count { margin-bottom: 8px; font-size: 13px; }
.count span { font-weight: bold; }
.bg-select, .lang-select, .gender-select { margin-bottom: 16px; }
</style>
</head>
<body>
<h1>3x3 Hairstyle Prompt Generator</h1>
<!-- Gender selector -->
<div class="gender-select">
<label>Gender: </label>
<select id="genderMode">
<option value="female">Female hairstyles</option>
<option value="male">Male hairstyles</option>
</select>
</div>
<!-- Background color selector -->
<div class="bg-select">
<label>Background color: </label>
<select id="bgColor">
<option value="white">white</option>
<option value="light gray">light gray</option>
<option value="dark gray">dark gray</option>
<option value="black">black</option>
<option value="pastel pink">pastel pink</option>
<option value="pastel blue">pastel blue</option>
<option value="pastel green">pastel green</option>
</select>
</div>
<!-- Language selector -->
<div class="lang-select">
<label>Output language: </label>
<select id="langMode">
<option value="EN">English only</option>
<option value="JP">Japanese only</option>
<option value="BOTH">English + Japanese</option>
</select>
</div>
<div class="count">
Selected hairstyles: <span id="selectedCount">0</span> / 9
</div>
<!-- Female hairstyles -->
<div class="section-title">Female Hairstyles</div>
<div class="hair-list" id="femaleList">
<!-- Existing + New Styles -->
<label class="hair-item"><input type="checkbox" value="long hair">long hair</label>
<label class="hair-item"><input type="checkbox" value="short bob">short bob</label>
<label class="hair-item"><input type="checkbox" value="wavy long hair">wavy long hair</label>
<label class="hair-item"><input type="checkbox" value="straight long hair">straight long hair</label>
<label class="hair-item"><input type="checkbox" value="curly medium hair">curly medium hair</label>
<label class="hair-item"><input type="checkbox" value="ponytail">ponytail</label>
<label class="hair-item"><input type="checkbox" value="bangs">bangs</label>
<label class="hair-item"><input type="checkbox" value="Korean tassel cut bob">Korean tassel cut bob</label>
<label class="hair-item"><input type="checkbox" value="elegant long wave">elegant long wave</label>
<label class="hair-item"><input type="checkbox" value="inner color style">inner color style</label>
<label class="hair-item"><input type="checkbox" value="soft layered cut">soft layered cut</label>
<label class="hair-item"><input type="checkbox" value="outward medium style">outward medium style</label>
<!-- NEW FEMALE STYLES -->
<label class="hair-item"><input type="checkbox" value="hime cut">hime cut</label>
<label class="hair-item"><input type="checkbox" value="wolf cut">wolf cut</label>
<label class="hair-item"><input type="checkbox" value="see-through bangs">see-through bangs</label>
<label class="hair-item"><input type="checkbox" value="perm medium hair">perm medium hair</label>
<label class="hair-item"><input type="checkbox" value="high ponytail">high ponytail</label>
<label class="hair-item"><input type="checkbox" value="low ponytail">low ponytail</label>
<label class="hair-item"><input type="checkbox" value="twin tails">twin tails</label>
<label class="hair-item"><input type="checkbox" value="messy bun">messy bun</label>
<label class="hair-item"><input type="checkbox" value="half up half down">half up half down</label>
<label class="hair-item"><input type="checkbox" value="short pixie cut">short pixie cut</label>
<label class="hair-item"><input type="checkbox" value="medium bob with waves">medium bob with waves</label>
<label class="hair-item"><input type="checkbox" value="ombre long hair">ombre long hair</label>
</div>
<!-- Male hairstyles -->
<div class="section-title">Male Hairstyles</div>
<div class="hair-list" id="maleList">
<!-- Existing + New Styles -->
<label class="hair-item"><input type="checkbox" value="short fade cut">short fade cut</label>
<label class="hair-item"><input type="checkbox" value="buzz cut">buzz cut</label>
<label class="hair-item"><input type="checkbox" value="crew cut">crew cut</label>
<label class="hair-item"><input type="checkbox" value="pompadour">pompadour</label>
<label class="hair-item"><input type="checkbox" value="undercut">undercut</label>
<label class="hair-item"><input type="checkbox" value="middle part">middle part</label>
<label class="hair-item"><input type="checkbox" value="curly top fade">curly top fade</label>
<label class="hair-item"><input type="checkbox" value="messy medium hair">messy medium hair</label>
<label class="hair-item"><input type="checkbox" value="slick back hair">slick back hair</label>
<label class="hair-item"><input type="checkbox" value="two block cut">two block cut</label>
<!-- NEW MALE STYLES -->
<label class="hair-item"><input type="checkbox" value="spiky short hair">spiky short hair</label>
<label class="hair-item"><input type="checkbox" value="long wavy hair">long wavy hair</label>
<label class="hair-item"><input type="checkbox" value="man bun">man bun</label>
<label class="hair-item"><input type="checkbox" value="side part haircut">side part haircut</label>
<label class="hair-item"><input type="checkbox" value="taper fade">taper fade</label>
<label class="hair-item"><input type="checkbox" value="curtain hairstyle">curtain hairstyle</label>
<label class="hair-item"><input type="checkbox" value="short textured crop">short textured crop</label>
<label class="hair-item"><input type="checkbox" value="mullet haircut">mullet haircut</label>
<label class="hair-item"><input type="checkbox" value="afro short style">afro short style</label>
<label class="hair-item"><input type="checkbox" value="dreadlocks medium">dreadlocks medium</label>
</div>
<button id="randomBtn">Random Select 9</button>
<button id="generateBtn">Generate Prompt</button>
<button id="copyBtn">Copy Prompt</button>
<textarea id="output" placeholder="Your prompt will appear here..."></textarea>
<script>
const femaleList = document.getElementById('femaleList');
const maleList = document.getElementById('maleList');
const genderMode = document.getElementById('genderMode');
const selectedCountSpan = document.getElementById('selectedCount');
const randomBtn = document.getElementById('randomBtn');
const generateBtn = document.getElementById('generateBtn');
const copyBtn = document.getElementById('copyBtn');
const output = document.getElementById('output');
const bgColor = document.getElementById('bgColor');
const langMode = document.getElementById('langMode');
function getActiveList() {
return genderMode.value === "female"
? femaleList.querySelectorAll('input[type="checkbox"]')
: maleList.querySelectorAll('input[type="checkbox"]');
}
function getSelectedHairstyles() {
return Array.from(getActiveList())
.filter(c => c.checked)
.map(c => c.value);
}
function updateCount() {
selectedCountSpan.textContent = getSelectedHairstyles().length;
}
femaleList.addEventListener('change', updateCount);
maleList.addEventListener('change', updateCount);
randomBtn.addEventListener('click', () => {
const boxes = Array.from(getActiveList());
boxes.forEach(b => b.checked = false);
const shuffled = boxes.sort(() => Math.random() - 0.5);
const selected = shuffled.slice(0, 9);
selected.forEach(b => b.checked = true);
updateCount();
});
generateBtn.addEventListener('click', () => {
const styles = getSelectedHairstyles();
if (styles.length !== 9) {
alert("Please select exactly 9 hairstyles.");
return;
}
const EN = `
You are a professional creative director at a luxury hair salon.
Analyze the uploaded selfie and deeply examine the subject's facial structure, features, expression, skin tone, and lighting conditions.
Based on your analysis, generate a single image consisting of a perfectly aligned 3x3 grid (9 panels) where the subject's face, identity, and expression remain completely consistent, and only the hairstyle changes in each panel.
Follow these rules:
1. Grid: A flawless 3x3 layout with 9 equal panels. Background must be ${bgColor.value}.
2. Hairstyles (${genderMode.value}):
- ${styles.join("\n - ")}
3. Head Direction: Each of the 9 images must face a different direction.
4. Quality: High-end beauty editorial quality.
5. Realism: Ultra-high-resolution photorealism.
Render the final output as a seamless 3x3 hairstyle transformation grid in 4K quality.
`.trim();
const JP = `
あなたは高級ヘアサロンのクリエイティブディレクターです。
アップロードされた自撮り写真を分析し、人物の顔の構造、特徴、表情、肌の色、照明状態を詳細に評価してください。
その分析に基づき、人物の顔・表情・アイデンティティを完全に維持したまま、髪型だけを変更した3x3グリッド（9枚）の画像を生成してください。
【生成ルール】
1. グリッド: 完全に整列した3x3レイアウト。背景は ${bgColor.value} に統一。
2. 髪型 (${genderMode.value}):
- ${styles.join("\n - ")}
3. 顔の向き: 9枚すべて異なる角度に調整すること。
4. 品質: 雑誌レベルのハイエンド品質。
5. リアリズム: 超高精細フォトリアリズム。
最終的に、シームレスな3x3ヘアスタイル変化グリッドを4K品質で生成してください。
`.trim();
if (langMode.value === "EN") output.value = EN;
if (langMode.value === "JP") output.value = JP;
if (langMode.value === "BOTH") output.value = EN + "\n\n==============================\n\n" + JP;
});
copyBtn.addEventListener('click', () => {
if (!output.value.trim()) {
alert("There is no prompt to copy.");
return;
}
navigator.clipboard.writeText(output.value)
.then(() => alert("Prompt copied to clipboard!"))
.catch(() => alert("Copy failed."));
});
updateCount();
</script>
</body>
</html>