junkerstock

画像プロンプト生成４

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像生成プロンプト作成機（超・完全版）</title>
<style>
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; padding: 1em; background-color: #f0f2f5; color: #333; }
.container { display: flex; flex-direction: column; gap: 20px; max-width: 650px; margin: 0 auto; background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
h1 { text-align: center; color: #444; font-size: 1.6em; margin-bottom: 10px; }

.section-box {
border: 1px solid #e1e4e8;
padding: 20px;
border-radius: 12px;
background-color: #fafbfc;
}
.section-label {
font-weight: bold;
color: #555;
display: block;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 5px;
}

/* 入力要素のデザイン */
.prompt-input, textarea, select {
width: 100%;
padding: 12px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
background-color: #fff;
}
.prompt-input:focus, textarea:focus, select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* 履歴周り */
.history-controls { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
select.history-select { flex-grow: 1; padding: 8px; border: 1px solid #ddd; }
.clear-btn { font-size: 0.85em; cursor: pointer; color: #d9534f; background: none; border: 1px solid #d9534f; border-radius: 6px; padding: 6px 10px; white-space: nowrap; }

/* ランダムボタン */
.random-btn {
width: 100%;
padding: 12px;
font-size: 1em;
font-weight: bold;
color: #fff;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 8px;
cursor: pointer;
margin-bottom: 15px;
transition: all 0.2s;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.random-btn:active { transform: translateY(2px); box-shadow: none; }
.random-btn:hover { opacity: 0.9; }

/* 詳細エリア */
textarea { height: 110px; line-height: 1.6; resize: vertical; }

/* 送信エリア */
.controls { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
button.send-btn {
padding: 12px 25px;
cursor: pointer;
font-size: 1em;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-weight: bold;
white-space: nowrap;
box-shadow: 0 4px 6px rgba(0,123,255,0.2);
}
button.send-btn:hover { background-color: #0056b3; }
</style>
</head>
<body>

<h1>🎨 超・画像生成プロンプト作成機</h1>

<div class="container">

<div class="section-box">
<label class="section-label">📌 1. 何を作りますか？（指示）</label>
<input type="text" id="instructionInput" class="prompt-input"
value="360度パノラマ画像を作って。">

<div class="history-controls">
<select id="instructionHistory" class="history-select" onchange="selectHistory()">
<option value="" disabled selected>履歴から選択...</option>
</select>
<button type="button" class="clear-btn" onclick="clearHistory()">履歴削除</button>
</div>
</div>

<div class="section-box">
<label class="section-label">🎲 2. どんな情景ですか？（詳細）</label>
<button class="random-btn" onclick="generateRandomPrompt()">
ランダムな情景を生成する (ワード数 3倍増量中!)
</button>
<textarea id="detailArea" placeholder="ボタンを押すと、ここに詳細な情景が生成されます..."></textarea>
</div>

<div class="section-box" style="background-color: #eef2ff; border-color: #d0d7de;">
<label class="section-label">🚀 3. AIを選択して作成</label>
<div class="controls">
<select id="aiSelector">
<option value="bing">Bing Image Creator (日本語OK/無料)</option>
<option value="firefly">Adobe Firefly (日本語OK/高品質)</option>
<option value="gemini">Google Gemini</option>
<option value="chatgpt">ChatGPT (DALL-E 3)</option>
<option value="claude">Claude (プロンプト相談用)</option>
<option value="perplexity">Perplexity (検索して作成)</option>
</select>
<button class="send-btn" onclick="askAI()">作成開始</button>
</div>
</div>
</div>

<script>
// ---------------------------------------------------------
// ■ 設定：ランダムワードリスト（大幅増量版）
// ---------------------------------------------------------
const promptData = {
locations: [

// SF・未来
"近未来都市の摩天楼", "ネオン輝くサイバーパンクな路地裏", "巨大な宇宙ステーションのドック",
"火星の居住ドーム", "浮遊する空中都市", "量子コンピュータの内部空間",

"ホログラム広告が溢れる繁華街", "海底に沈んだ未来都市の廃墟", "軌道エレベーターのターミナル",
"植物と機械が融合したソーラーパンクな庭園", "ワープ航法中の宇宙船", "二つの月が浮かぶ異星の空",
"アステロイドベルトの採掘基地", "ブラックホールの事象の地平線", "ダイソン球の巨大構造物", "テラフォーミングされた惑星の地表",
"ガス惑星の軌道プラットフォーム", "銀河を背景にした宇宙艦隊", "未知の惑星の原生林", "氷の惑星の秘密基地",
"空飛ぶ車の渋滞", "重武装した二足歩行メカ", "反重力バイク","巨大な恒星間移民船", "透明なチューブを走るリニアトレイン",
"一人乗りの飛行ポッド", "パワードスーツを装着した兵士", "深海探査用潜水艇", "可変翼の宇宙戦闘機", "サイボーグの整備士",
"脳直結インターフェース", "アンドロイドの製造ライン", "ナノマシンの集合体", "人工知能の中枢サーバー",
"空中に投影される立体ディスプレイ", "拡張現実のナビゲーション", "コールドスリープのカプセル",
"デジタル雨が降る街", "グリッチノイズの入った視界","マトリックスのようなデータ空間", "サイバーパンクなバーのカウンター",
"錆びついた巨大ロボットの残骸", "発光するキノコの森", "クリスタルでできたデータバンク", "磁気嵐の吹き荒れる荒野",
"反物質エンジンの青い光", "未来のコンビニエンスストア", "垂直農場の緑", "宇宙港の混雑したロビー",
"未知の異星生物","シールド越しに見る超新星爆発", "無重力空間での浮遊", "クローン培養槽",
"サイバー義肢の露店", "ホバーボードに乗る若者", "空を覆う巨大な宣伝飛行船", "未来の医療ポッド",
"エネルギーラインが走る壁面", "金属生命体の群れ", "情報端末のホログラムキーボード", "惑星直列の夜",
"銀河鉄道の駅", "宇宙を泳ぐ巨大生物", "蒸気とネオンのスチームパンク", "サイバータトゥー", "虹彩認証スキャン",
"未来の図書館", "プラズマシールド", "レーザー加工機", "遺伝子操作ラボ", "タイムマシンのゲート",
"異次元への裂け目", "要塞化した移動都市", "砂漠に埋もれた宇宙船", "AIホログラムのアバター",
"ニューラルネットワークの可視化", "多層構造のハイウェイ", "ドローン配送", "合成食料の屋台",
"エネルギー採掘リグ", "月面クレーターの影", "宇宙エレベーターのゴンドラ", "バイオルミネセンスの海",
"放棄された研究所", "センチネルロボット", "未来のスポーツスタジアム", "重力制御装置", "エネルギータンク",
"翻訳機端末", "レーザーブラスター", "プラズマソード", "宇宙服のバイザー", "電子回路のようなタトゥー",
"ホログラムの歌手", "サイバー空間の玄関口",

// ファンタジー
"古代遺跡が眠る密林", "魔法使いの隠れ家", "クリスタルの洞窟", "雲の上の神殿",
"ドラゴンの巣がある火山", "妖精が住む光る森", "中世ヨーロッパ風の城下町",

"エルフの聖なる泉", "ドワーフの地下要塞", "世界樹の根本", "満月の夜の古城", "霧深い沼地と魔女の家",
"天空に浮かぶ島々", "夕暮れの冒険者ギルド", "賑やかな市場の屋台", "薄暗い地下ダンジョンの通路",
"伝説の聖剣が刺さった岩", "錬金術師の散らかった工房", "召喚魔法陣と光の柱", "グリフォンが飛び交う渓谷",
"人魚が泳ぐサンゴ礁の宮殿", "氷の女王が住む水晶の城", "灼熱の溶岩地帯", "砂漠に半分埋もれた巨像", "廃墟となった神殿",
"オーロラが輝く雪原", "巨大なキノコの森", "精霊が集まる湖畔", "雷雨の中の塔", "王宮の大広間", "古い図書館と禁断の魔導書",
"宝箱の山", "ミミックが潜む部屋", "ユニコーンの休息", "フェニックスの羽ばたき", "巨大なゴーレム", "スケルトンの軍団",
"オークの砦", "ゴブリンの洞窟", "スライムの群生地", "魔法の絨毯で空を飛ぶ", "ペガサスに乗った騎士", "ドラゴンライダー",
"黒騎士の威圧感", "白魔道士の祈り", "弓使いのエルフ", "ドワーフの鍛冶屋", "吟遊詩人の演奏", "盗賊の隠れ家",
"賢者の石", "光り輝くポーション", "ルーン文字が刻まれた石碑", "魔法の杖", "錆びついた鎧", "ドラゴンの鱗",
"マンドラゴラ", "使い魔の黒猫", "クリスタルボール", "空飛ぶ帆船", "海賊船とクラーケン", "虹の架かる滝", "星降る夜の野営地",
"キャンプファイアの炎", "ランタンの灯る石畳の道", "ツタの絡まる石橋", "ステンドグラスの大聖堂", "地下墓地の石棺",
"異界へのゲート", "呪われた森", "聖なる結界", "マナの奔流", "炎の精霊", "水の精霊", "風の精霊", "土の精霊",
"幻獣の卵", "ガラスの靴", "カボチャの馬車", "お菓子の家", "豆の木", "石化した人々", "鏡の国", "時計塔の歯車",
"操り人形の館", "迷いの森", "オアシスの蜃気楼", "深海の沈没船", "天空の回廊", "女神の彫像", "英雄の記念碑",
"終末の予言書", "封印された扉", "魔法学院の教室", "薬草園", "夜光虫の海", "守護獣の視線", "戦乙女ヴァルキリー",
"神々の黄昏", "約束の地", "冒険の始まり",

// 自然
"静かな湖畔のキャンプ場", "オーロラが見える雪原", "サンゴ礁が広がる海底",
"桜が満開の並木道", "紅葉が美しい日本庭園", "広大なサバンナ", "霧の立ち込める海岸",
// 日常・屋内
"日差しが差し込む図書館", "散らかった画家の部屋", "雨の日のカフェの窓辺",
"賑やかな夜の屋台通り", "誰もいない深夜のコンビニ", "レトロなゲームセンター"
],
times: [
// 時間
"夕暮れ時、マジックアワー", "満天の星空が広がる真夜中", "朝日が昇る早朝",
"太陽が照りつける真昼", "月明かりだけの静寂な夜",
// 天候・現象
"激しい雷雨の中", "しんしんと雪が降る日", "濃い霧に包まれた状態",
"虹がかかっている空", "花吹雪が舞っている", "ダイヤモンドダストが輝く",
"日食で薄暗い瞬間", "嵐の前の静けさ"
],
styles: [
// 画風・タッチ
"油絵のような重厚なタッチ", "水彩画風の淡い色彩", "高精細な写真のようなリアルさ(8k)",
"スタジオジブリ風のアニメスタイル", "新海誠風のドラマチックな背景", "浮世絵スタイル",
"ドット絵(ピクセルアート)", "アメコミ風のポップなスタイル", "鉛筆画のスケッチ風",
"3Dレンダリング(Unreal Engine 5)", "ミニチュア写真風(チルトシフト)", "墨絵スタイル"
],
details: [
// キャラ・生き物
"巨大な猫が寝ている", "空飛ぶクジラが泳いでいる", "小さなロボットが掃除をしている",
"フードを被った謎の人物が立っている", "サイボーグの少女が座っている", "沢山の柴犬が遊んでいる",
// 物・現象
"謎の古代文字が空中に浮かんでいる", "色とりどりの発光植物が生えている", "レトロな飛行船が飛んでいる",
"美味しそうなパンケーキが置かれている", "魔法陣が床に描かれている", "ガラスの破片が舞っている",
// 雰囲気
"ノスタルジックな雰囲気", "退廃的で不気味な空気感", "神々しく幻想的な光",
"活気に満ち溢れている", "孤独で寂しい雰囲気"
]
};

// ---------------------------------------------------------
// ■ 履歴管理機能
// ---------------------------------------------------------
const STORAGE_KEY = 'ai_image_instruction_history_v2'; // キー名を変更してバージョン管理

window.onload = function() { loadHistory(); };

function saveToHistory(text) {
if (!text) return;
let history = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
history = history.filter(item => item !== text);
history.unshift(text);
if (history.length > 20) history.pop();
localStorage.setItem(STORAGE_KEY, JSON.stringify(history));
loadHistory();
}

function loadHistory() {
const historySelect = document.getElementById('instructionHistory');
const history = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];

historySelect.innerHTML = '<option value="" disabled selected>履歴から選択...</option>';

const defaults = [
"360度パノラマ画像を作って。",
"PCのデスクトップ壁紙(16:9)を作って。",
"スマホ用の縦長壁紙(9:16)を作って。",
"ファンタジー小説の挿絵を作って。",
"RPGのアイテムアイコン画像を作って。",
"ブログのアイキャッチ画像を作って。",
"リアルな写真風のポートレートを作って。"
];

const allItems = [...new Set([...history, ...defaults])];
allItems.forEach(text => {
const option = document.createElement('option');
option.value = text;
option.text = text.length > 40 ? text.substring(0, 40) + "..." : text;
historySelect.appendChild(option);
});
}

function selectHistory() {
document.getElementById('instructionInput').value = document.getElementById('instructionHistory').value;
}

function clearHistory() {
if(confirm("履歴を削除しますか？")) {
localStorage.removeItem(STORAGE_KEY);
loadHistory();
}
}

// ---------------------------------------------------------
// ■ ランダム生成機能
// ---------------------------------------------------------
function generateRandomPrompt() {
const detailArea = document.getElementById('detailArea');
const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];

// 組み合わせロジック
const parts = [
pick(promptData.locations),
pick(promptData.times),
pick(promptData.styles)
];

// 70%の確率でディテールを追加
if (Math.random() > 0.3) parts.push(pick(promptData.details));

detailArea.value = parts.join("。\n") + "。";

// アニメーション効果（枠線を一瞬光らせる）
detailArea.style.borderColor = "#007bff";
setTimeout(() => detailArea.style.borderColor = "#ccc", 300);
}

// ---------------------------------------------------------
// ■ 送信機能 (Instruction + Detail)
// ---------------------------------------------------------
function askAI() {
const instruction = document.getElementById('instructionInput').value.trim();
const details = document.getElementById('detailArea').value.trim();

if (!instruction || !details) {
alert("指示と詳細の両方が必要です。");
return;
}

saveToHistory(instruction);

// プロンプト合体
// 画像生成特化AIの場合は、少し構成を変えると精度が上がりますが、
// 汎用性を重視して「指示 + 詳細」の形にします。
const finalPrompt = instruction + "\n\n【画像の詳細指示】\n" + details;

const aiService = document.getElementById('aiSelector').value;
const encodedPrompt = encodeURIComponent(finalPrompt);
let url = "";

switch (aiService) {
case "bing": url = "https://www.bing.com/images/create"; break;
case "firefly": url = "https://firefly.adobe.com/upload/text_to_image"; break;
case "gemini": url = "https://gemini.google.com/app"; break;
case "chatgpt": url = "https://chatgpt.com/"; break;
case "claude": url = "https://claude.ai/new"; break;
case "perplexity": url = `https://www.perplexity.ai/search?q=${encodedPrompt}`; break;
}

// PerplexityのみURLで自動実行
if (aiService === 'perplexity') {
window.open(url, '_blank');
}
// 他はクリップボードにコピーしてから開く
else {
if (navigator.clipboard) {
navigator.clipboard.writeText(finalPrompt).then(() => {
let serviceName = document.getElementById('aiSelector').options[document.getElementById('aiSelector').selectedIndex].text;
// BingやFirefly用のメッセージ
let msg = "プロンプトをコピーしました！\n\n" + serviceName + "が開きます。\n入力欄に「貼り付け（Ctrl+V）」して作成ボタンを押してください。";

if(confirm(msg)) {
window.open(url, '_blank');
}
});
} else {
alert("コピー機能が使えません。");
window.open(url, '_blank');
}
}
}
</script>

</body>
</html>

使用変数

aiService
allItems
askAI -------( Function )
borderColor
charset
class
clearHistory -------( Function )
defaults
detailArea
details
encodedPrompt
finalPrompt
generateRandomPrompt -------( Function )
history
historySelect
id
innerHTML
instruction
item
lang
loadHistory -------( Function )
msg
onchange
onclick
onload
option
parts
pick
placeholder
promptData
q
saveToHistory -------( Function )
selectHistory -------( Function )
serviceName
STORAGE_KEY
style
text
type
url
value

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>画像生成プロンプト作成機（超・完全版）</title>
    <style>
        body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; padding: 1em; background-color: #f0f2f5; color: #333; }
        .container { display: flex; flex-direction: column; gap: 20px; max-width: 650px; margin: 0 auto; background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #444; font-size: 1.6em; margin-bottom: 10px; }
        
        .section-box {
            border: 1px solid #e1e4e8;
            padding: 20px;
            border-radius: 12px;
            background-color: #fafbfc;
        }
        .section-label {
            font-weight: bold;
            color: #555;
            display: block;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

/* 入力要素のデザイン */
        .prompt-input, textarea, select {
            width: 100%;
            padding: 12px;
            font-size: 1em;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-sizing: border-box;
            background-color: #fff;
        }
        .prompt-input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
        }

/* 履歴周り */
        .history-controls { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
        select.history-select { flex-grow: 1; padding: 8px; border: 1px solid #ddd; }
        .clear-btn { font-size: 0.85em; cursor: pointer; color: #d9534f; background: none; border: 1px solid #d9534f; border-radius: 6px; padding: 6px 10px; white-space: nowrap; }

/* ランダムボタン */
        .random-btn {
            width: 100%;
            padding: 12px;
            font-size: 1em;
            font-weight: bold;
            color: #fff;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin-bottom: 15px;
            transition: all 0.2s;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .random-btn:active { transform: translateY(2px); box-shadow: none; }
        .random-btn:hover { opacity: 0.9; }

/* 詳細エリア */
        textarea { height: 110px; line-height: 1.6; resize: vertical; }

/* 送信エリア */
        .controls { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
        button.send-btn { 
            padding: 12px 25px; 
            cursor: pointer; 
            font-size: 1em; 
            background-color: #007bff; 
            color: white; 
            border: none; 
            border-radius: 8px; 
            font-weight: bold; 
            white-space: nowrap;
            box-shadow: 0 4px 6px rgba(0,123,255,0.2);
        }
        button.send-btn:hover { background-color: #0056b3; }
    </style>
</head>
<body>

<h1>🎨 超・画像生成プロンプト作成機</h1>

<div class="container">
        
        <div class="section-box">
            <label class="section-label">📌 1. 何を作りますか？（指示）</label>
            <input type="text" id="instructionInput" class="prompt-input" 
                   value="360度パノラマ画像を作って。">
            
            <div class="history-controls">
                <select id="instructionHistory" class="history-select" onchange="selectHistory()">
                    <option value="" disabled selected>履歴から選択...</option>
                </select>
                <button type="button" class="clear-btn" onclick="clearHistory()">履歴削除</button>
            </div>
        </div>

<div class="section-box">
            <label class="section-label">🎲 2. どんな情景ですか？（詳細）</label>
            <button class="random-btn" onclick="generateRandomPrompt()">
                ランダムな情景を生成する (ワード数 3倍増量中!)
            </button>
            <textarea id="detailArea" placeholder="ボタンを押すと、ここに詳細な情景が生成されます..."></textarea>
        </div>

<div class="section-box" style="background-color: #eef2ff; border-color: #d0d7de;">
            <label class="section-label">🚀 3. AIを選択して作成</label>
            <div class="controls">
                <select id="aiSelector">
                    <option value="bing">Bing Image Creator (日本語OK/無料)</option>
                    <option value="firefly">Adobe Firefly (日本語OK/高品質)</option>
                    <option value="gemini">Google Gemini</option>
                    <option value="chatgpt">ChatGPT (DALL-E 3)</option>
                    <option value="claude">Claude (プロンプト相談用)</option>
                    <option value="perplexity">Perplexity (検索して作成)</option>
                </select>
                <button class="send-btn" onclick="askAI()">作成開始</button>
            </div>
        </div>
    </div>

// SF・未来
            "近未来都市の摩天楼", "ネオン輝くサイバーパンクな路地裏", "巨大な宇宙ステーションのドック", 
            "火星の居住ドーム", "浮遊する空中都市", "量子コンピュータの内部空間",

"ホログラム広告が溢れる繁華街", "海底に沈んだ未来都市の廃墟", "軌道エレベーターのターミナル",
"植物と機械が融合したソーラーパンクな庭園", "ワープ航法中の宇宙船", "二つの月が浮かぶ異星の空",
"アステロイドベルトの採掘基地", "ブラックホールの事象の地平線", "ダイソン球の巨大構造物", "テラフォーミングされた惑星の地表",
"ガス惑星の軌道プラットフォーム", "銀河を背景にした宇宙艦隊", "未知の惑星の原生林", "氷の惑星の秘密基地",
"空飛ぶ車の渋滞", "重武装した二足歩行メカ", "反重力バイク","巨大な恒星間移民船", "透明なチューブを走るリニアトレイン",
 "一人乗りの飛行ポッド", "パワードスーツを装着した兵士", "深海探査用潜水艇", "可変翼の宇宙戦闘機", "サイボーグの整備士",
"脳直結インターフェース", "アンドロイドの製造ライン", "ナノマシンの集合体", "人工知能の中枢サーバー",
"空中に投影される立体ディスプレイ", "拡張現実のナビゲーション", "コールドスリープのカプセル",
"デジタル雨が降る街", "グリッチノイズの入った視界","マトリックスのようなデータ空間", "サイバーパンクなバーのカウンター",
"錆びついた巨大ロボットの残骸", "発光するキノコの森", "クリスタルでできたデータバンク", "磁気嵐の吹き荒れる荒野",
"反物質エンジンの青い光", "未来のコンビニエンスストア", "垂直農場の緑", "宇宙港の混雑したロビー",
"未知の異星生物","シールド越しに見る超新星爆発", "無重力空間での浮遊", "クローン培養槽",
"サイバー義肢の露店", "ホバーボードに乗る若者", "空を覆う巨大な宣伝飛行船", "未来の医療ポッド",
"エネルギーラインが走る壁面", "金属生命体の群れ", "情報端末のホログラムキーボード", "惑星直列の夜",
"銀河鉄道の駅", "宇宙を泳ぐ巨大生物", "蒸気とネオンのスチームパンク", "サイバータトゥー", "虹彩認証スキャン",
"未来の図書館", "プラズマシールド", "レーザー加工機", "遺伝子操作ラボ", "タイムマシンのゲート",
"異次元への裂け目", "要塞化した移動都市", "砂漠に埋もれた宇宙船", "AIホログラムのアバター",
"ニューラルネットワークの可視化", "多層構造のハイウェイ", "ドローン配送", "合成食料の屋台",
"エネルギー採掘リグ", "月面クレーターの影", "宇宙エレベーターのゴンドラ", "バイオルミネセンスの海",
"放棄された研究所", "センチネルロボット", "未来のスポーツスタジアム", "重力制御装置", "エネルギータンク",
"翻訳機端末", "レーザーブラスター", "プラズマソード", "宇宙服のバイザー", "電子回路のようなタトゥー",
"ホログラムの歌手", "サイバー空間の玄関口",

// ファンタジー
            "古代遺跡が眠る密林", "魔法使いの隠れ家", "クリスタルの洞窟", "雲の上の神殿", 
            "ドラゴンの巣がある火山", "妖精が住む光る森", "中世ヨーロッパ風の城下町",

"エルフの聖なる泉", "ドワーフの地下要塞", "世界樹の根本", "満月の夜の古城", "霧深い沼地と魔女の家",
"天空に浮かぶ島々", "夕暮れの冒険者ギルド", "賑やかな市場の屋台", "薄暗い地下ダンジョンの通路",
"伝説の聖剣が刺さった岩", "錬金術師の散らかった工房", "召喚魔法陣と光の柱", "グリフォンが飛び交う渓谷",
"人魚が泳ぐサンゴ礁の宮殿", "氷の女王が住む水晶の城", "灼熱の溶岩地帯", "砂漠に半分埋もれた巨像", "廃墟となった神殿",
"オーロラが輝く雪原", "巨大なキノコの森", "精霊が集まる湖畔", "雷雨の中の塔", "王宮の大広間", "古い図書館と禁断の魔導書",
"宝箱の山", "ミミックが潜む部屋", "ユニコーンの休息", "フェニックスの羽ばたき", "巨大なゴーレム", "スケルトンの軍団",
"オークの砦", "ゴブリンの洞窟", "スライムの群生地", "魔法の絨毯で空を飛ぶ", "ペガサスに乗った騎士", "ドラゴンライダー",
"黒騎士の威圧感", "白魔道士の祈り", "弓使いのエルフ", "ドワーフの鍛冶屋", "吟遊詩人の演奏", "盗賊の隠れ家",
"賢者の石", "光り輝くポーション", "ルーン文字が刻まれた石碑", "魔法の杖", "錆びついた鎧", "ドラゴンの鱗",
"マンドラゴラ", "使い魔の黒猫", "クリスタルボール", "空飛ぶ帆船", "海賊船とクラーケン", "虹の架かる滝", "星降る夜の野営地",
"キャンプファイアの炎", "ランタンの灯る石畳の道", "ツタの絡まる石橋", "ステンドグラスの大聖堂", "地下墓地の石棺",
"異界へのゲート", "呪われた森", "聖なる結界", "マナの奔流", "炎の精霊", "水の精霊", "風の精霊", "土の精霊",
"幻獣の卵", "ガラスの靴", "カボチャの馬車", "お菓子の家", "豆の木", "石化した人々", "鏡の国", "時計塔の歯車",
"操り人形の館", "迷いの森", "オアシスの蜃気楼", "深海の沈没船", "天空の回廊", "女神の彫像", "英雄の記念碑",
"終末の予言書", "封印された扉", "魔法学院の教室", "薬草園", "夜光虫の海", "守護獣の視線", "戦乙女ヴァルキリー",
"神々の黄昏", "約束の地", "冒険の始まり",

// 自然
            "静かな湖畔のキャンプ場", "オーロラが見える雪原", "サンゴ礁が広がる海底", 
            "桜が満開の並木道", "紅葉が美しい日本庭園", "広大なサバンナ", "霧の立ち込める海岸",
            // 日常・屋内
            "日差しが差し込む図書館", "散らかった画家の部屋", "雨の日のカフェの窓辺", 
            "賑やかな夜の屋台通り", "誰もいない深夜のコンビニ", "レトロなゲームセンター"
        ],
        times: [
            // 時間
            "夕暮れ時、マジックアワー", "満天の星空が広がる真夜中", "朝日が昇る早朝", 
            "太陽が照りつける真昼", "月明かりだけの静寂な夜",
            // 天候・現象
            "激しい雷雨の中", "しんしんと雪が降る日", "濃い霧に包まれた状態", 
            "虹がかかっている空", "花吹雪が舞っている", "ダイヤモンドダストが輝く",
            "日食で薄暗い瞬間", "嵐の前の静けさ"
        ],
        styles: [
            // 画風・タッチ
            "油絵のような重厚なタッチ", "水彩画風の淡い色彩", "高精細な写真のようなリアルさ(8k)", 
            "スタジオジブリ風のアニメスタイル", "新海誠風のドラマチックな背景", "浮世絵スタイル",
            "ドット絵(ピクセルアート)", "アメコミ風のポップなスタイル", "鉛筆画のスケッチ風",
            "3Dレンダリング(Unreal Engine 5)", "ミニチュア写真風(チルトシフト)", "墨絵スタイル"
        ],
        details: [
            // キャラ・生き物
            "巨大な猫が寝ている", "空飛ぶクジラが泳いでいる", "小さなロボットが掃除をしている", 
            "フードを被った謎の人物が立っている", "サイボーグの少女が座っている", "沢山の柴犬が遊んでいる",
            // 物・現象
            "謎の古代文字が空中に浮かんでいる", "色とりどりの発光植物が生えている", "レトロな飛行船が飛んでいる",
            "美味しそうなパンケーキが置かれている", "魔法陣が床に描かれている", "ガラスの破片が舞っている",
            // 雰囲気
            "ノスタルジックな雰囲気", "退廃的で不気味な空気感", "神々しく幻想的な光", 
            "活気に満ち溢れている", "孤独で寂しい雰囲気"
        ]
    };

// ---------------------------------------------------------
    // ■ 履歴管理機能
    // ---------------------------------------------------------
    const STORAGE_KEY = 'ai_image_instruction_history_v2'; // キー名を変更してバージョン管理

window.onload = function() { loadHistory(); };

function saveToHistory(text) {
        if (!text) return;
        let history = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
        history = history.filter(item => item !== text);
        history.unshift(text);
        if (history.length > 20) history.pop();
        localStorage.setItem(STORAGE_KEY, JSON.stringify(history));
        loadHistory();
    }

function loadHistory() {
        const historySelect = document.getElementById('instructionHistory');
        const history = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
        
        historySelect.innerHTML = '<option value="" disabled selected>履歴から選択...</option>';
        
        const defaults = [
            "360度パノラマ画像を作って。",
            "PCのデスクトップ壁紙(16:9)を作って。",
            "スマホ用の縦長壁紙(9:16)を作って。",
            "ファンタジー小説の挿絵を作って。",
            "RPGのアイテムアイコン画像を作って。",
            "ブログのアイキャッチ画像を作って。",
            "リアルな写真風のポートレートを作って。"
        ];

const allItems = [...new Set([...history, ...defaults])];
        allItems.forEach(text => {
            const option = document.createElement('option');
            option.value = text;
            option.text = text.length > 40 ? text.substring(0, 40) + "..." : text;
            historySelect.appendChild(option);
        });
    }

function selectHistory() {
        document.getElementById('instructionInput').value = document.getElementById('instructionHistory').value;
    }

function clearHistory() {
        if(confirm("履歴を削除しますか？")) {
            localStorage.removeItem(STORAGE_KEY);
            loadHistory();
        }
    }

// ---------------------------------------------------------
    // ■ ランダム生成機能
    // ---------------------------------------------------------
    function generateRandomPrompt() {
        const detailArea = document.getElementById('detailArea');
        const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
        
        // 組み合わせロジック
        const parts = [
            pick(promptData.locations),
            pick(promptData.times),
            pick(promptData.styles)
        ];
        
        // 70%の確率でディテールを追加
        if (Math.random() > 0.3) parts.push(pick(promptData.details));
        
        detailArea.value = parts.join("。\n") + "。";
        
        // アニメーション効果（枠線を一瞬光らせる）
        detailArea.style.borderColor = "#007bff";
        setTimeout(() => detailArea.style.borderColor = "#ccc", 300);
    }

// ---------------------------------------------------------
    // ■ 送信機能 (Instruction + Detail)
    // ---------------------------------------------------------
    function askAI() {
        const instruction = document.getElementById('instructionInput').value.trim();
        const details = document.getElementById('detailArea').value.trim();

if (!instruction || !details) {
            alert("指示と詳細の両方が必要です。");
            return;
        }

saveToHistory(instruction);

// プロンプト合体
        // 画像生成特化AIの場合は、少し構成を変えると精度が上がりますが、
        // 汎用性を重視して「指示 + 詳細」の形にします。
        const finalPrompt = instruction + "\n\n【画像の詳細指示】\n" + details;
        
        const aiService = document.getElementById('aiSelector').value;
        const encodedPrompt = encodeURIComponent(finalPrompt);
        let url = "";

switch (aiService) {
            case "bing": url = "https://www.bing.com/images/create"; break;
            case "firefly": url = "https://firefly.adobe.com/upload/text_to_image"; break;
            case "gemini": url = "https://gemini.google.com/app"; break;
            case "chatgpt": url = "https://chatgpt.com/"; break;
            case "claude": url = "https://claude.ai/new"; break;
            case "perplexity": url = `https://www.perplexity.ai/search?q=${encodedPrompt}`; break;
        }

// PerplexityのみURLで自動実行
        if (aiService === 'perplexity') {
             window.open(url, '_blank');
        } 
        // 他はクリップボードにコピーしてから開く
        else {
            if (navigator.clipboard) {
                navigator.clipboard.writeText(finalPrompt).then(() => {
                    let serviceName = document.getElementById('aiSelector').options[document.getElementById('aiSelector').selectedIndex].text;
                    // BingやFirefly用のメッセージ
                    let msg = "プロンプトをコピーしました！\n\n" + serviceName + "が開きます。\n入力欄に「貼り付け（Ctrl+V）」して作成ボタンを押してください。";
                    
                    if(confirm(msg)) {
                        window.open(url, '_blank');
                    }
                });
            } else {
                alert("コピー機能が使えません。");
                window.open(url, '_blank');
            }
        }
    }
    </script>

</body>
</html>