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: 700px; 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);
}

/* 数値調整グリッド */
.settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.setting-item {
background: #fff;
border: 1px solid #ddd;
padding: 10px;
border-radius: 8px;
text-align: center;
}
.setting-item label {
display: block;
font-size: 0.85em;
color: #666;
margin-bottom: 5px;
font-weight: bold;
}
.setting-item input[type="number"] {
width: 100%;
padding: 8px;
text-align: center;
font-size: 1.1em;
border: 1px solid #ccc;
border-radius: 6px;
}

/* 履歴周り */
.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;
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: 180px; 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; }

.sub-label { font-size: 0.8em; color: #888; margin-top: -5px; margin-bottom: 10px; display:block;}
</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>
<span class="sub-label">各要素の個数を指定してください（0にすると除外されます）</span>

<div class="settings-grid">
<div class="setting-item"><label>SF・未来</label><input type="number" id="n_scifi" value="1" min="0"></div>
<div class="setting-item"><label>ファンタジー</label><input type="number" id="n_fantasy" value="1" min="0"></div>
<div class="setting-item"><label>自然</label><input type="number" id="n_nature" value="1" min="0"></div>
<div class="setting-item"><label>日常</label><input type="number" id="n_daily" value="1" min="0"></div>
<div class="setting-item"><label>時間・天候</label><input type="number" id="n_time" value="1" min="0"></div>
<div class="setting-item"><label>スタイル</label><input type="number" id="n_style" value="1" min="0"></div>
<div class="setting-item"><label>生き物</label><input type="number" id="n_creature" value="1" min="0"></div>
<div class="setting-item"><label>物体</label><input type="number" id="n_object" value="1" min="0"></div>
<div class="setting-item"><label>雰囲気</label><input type="number" id="n_atm" value="1" min="0"></div>
</div>

<button class="random-btn" onclick="generateRandomPrompt()">
設定した個数でランダム生成する！
</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 = {
scifi: [
"近未来都市の摩天楼", "ネオン輝くサイバーパンクな路地裏", "巨大な宇宙ステーションのドック",
"火星の居住ドーム", "浮遊する空中都市", "量子コンピュータの内部空間", "ディストピアな地下都市"
],
fantasy: [
"古代遺跡が眠る密林", "魔法使いの隠れ家", "クリスタルの洞窟", "雲の上の神殿",
"ドラゴンの巣がある火山", "妖精が住む光る森", "中世ヨーロッパ風の城下町", "空飛ぶ島々"
],
nature: [
"静かな湖畔のキャンプ場", "オーロラが見える雪原", "サンゴ礁が広がる海底",
"桜が満開の並木道", "紅葉が美しい日本庭園", "広大なサバンナ", "霧の立ち込める海岸", "険しい山岳地帯"
],
daily: [
"日差しが差し込む図書館", "散らかった画家の部屋", "雨の日のカフェの窓辺",
"賑やかな夜の屋台通り", "誰もいない深夜のコンビニ", "レトロなゲームセンター", "活気ある市場"
],
time: [
"夕暮れ時、マジックアワー", "満天の星空が広がる真夜中", "朝日が昇る早朝",
"太陽が照りつける真昼", "激しい雷雨の中", "しんしんと雪が降る日", "濃い霧に包まれた状態",
"虹がかかっている空", "花吹雪が舞っている", "日食で薄暗い瞬間"
],
style: [
"油絵のような重厚なタッチ", "水彩画風の淡い色彩", "高精細な写真のようなリアルさ(8k)",
"スタジオジブリ風のアニメスタイル", "新海誠風のドラマチックな背景", "浮世絵スタイル",
"ドット絵(ピクセルアート)", "アメコミ風のポップなスタイル", "3Dレンダリング(Unreal Engine 5)", "墨絵スタイル"
],
creature: [
"巨大な猫が寝ている", "空飛ぶクジラが泳いでいる", "小さなロボットが掃除をしている",
"フードを被った謎の人物が立っている", "サイボーグの少女が座っている", "沢山の柴犬が遊んでいる",
"透明なクラゲが浮遊している", "機械仕掛けの鳥が止まっている"
],
object: [
"謎の古代文字が空中に浮かんでいる", "色とりどりの発光植物が生えている", "レトロな飛行船が飛んでいる",
"美味しそうなパンケーキが置かれている", "魔法陣が床に描かれている", "ガラスの破片が舞っている",
"巨大な歯車が錆びついている", "時空の歪みが発生している"
],
atm: [
"ノスタルジックな雰囲気", "退廃的で不気味な空気感", "神々しく幻想的な光",
"活気に満ち溢れている", "孤独で寂しい雰囲気", "夢の中にいるような感覚",
"緊張感のある張り詰めた空気"
]
};

// ---------------------------------------------------------
// ■ 履歴管理機能
// ---------------------------------------------------------
const STORAGE_KEY = 'ai_image_instruction_history_v4'; // バージョン更新

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)];

let allParts = [];

// UIのIDとデータキーの紐付け
const config = [
{ id: 'n_scifi', data: promptData.scifi },
{ id: 'n_fantasy', data: promptData.fantasy },
{ id: 'n_nature', data: promptData.nature },
{ id: 'n_daily', data: promptData.daily },
{ id: 'n_time', data: promptData.time },
{ id: 'n_style', data: promptData.style },
{ id: 'n_creature', data: promptData.creature },
{ id: 'n_object', data: promptData.object },
{ id: 'n_atm', data: promptData.atm }
];

// 各設定をループして取得
config.forEach(item => {
const count = parseInt(document.getElementById(item.id).value) || 0;
for(let i = 0; i < count; i++) {
allParts.push(pick(item.data));
}
});

if (allParts.length === 0) {
detailArea.value = "（要素が選択されていません。数値を1以上に設定してください）";
return;
}

// 結合して表示
detailArea.value = allParts.join("。\n") + "。";

// アニメーション効果
detailArea.style.borderColor = "#007bff";
setTimeout(() => detailArea.style.borderColor = "#ccc", 300);
}

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

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

saveToHistory(instruction);

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;
}

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;
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
allParts
askAI -------( Function )
borderColor
charset
class
clearHistory -------( Function )
config
count
defaults
detailArea
details
encodedPrompt
finalPrompt
generateRandomPrompt -------( Function )
history
historySelect
i
id
innerHTML
instruction
item
lang
length
loadHistory -------( Function )
min
msg
onchange
onclick
onload
option
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: 700px; 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);
        }

/* 数値調整グリッド */
        .settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        .setting-item {
            background: #fff;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }
        .setting-item label {
            display: block;
            font-size: 0.85em;
            color: #666;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .setting-item input[type="number"] {
            width: 100%;
            padding: 8px;
            text-align: center;
            font-size: 1.1em;
            border: 1px solid #ccc;
            border-radius: 6px;
        }

/* 履歴周り */
        .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;
            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: 180px; 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; }
        
        .sub-label { font-size: 0.8em; color: #888; margin-top: -5px; margin-bottom: 10px; display:block;}
    </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>
            <span class="sub-label">各要素の個数を指定してください（0にすると除外されます）</span>

<div class="settings-grid">
                <div class="setting-item"><label>SF・未来</label><input type="number" id="n_scifi" value="1" min="0"></div>
                <div class="setting-item"><label>ファンタジー</label><input type="number" id="n_fantasy" value="1" min="0"></div>
                <div class="setting-item"><label>自然</label><input type="number" id="n_nature" value="1" min="0"></div>
                <div class="setting-item"><label>日常</label><input type="number" id="n_daily" value="1" min="0"></div>
                <div class="setting-item"><label>時間・天候</label><input type="number" id="n_time" value="1" min="0"></div>
                <div class="setting-item"><label>スタイル</label><input type="number" id="n_style" value="1" min="0"></div>
                <div class="setting-item"><label>生き物</label><input type="number" id="n_creature" value="1" min="0"></div>
                <div class="setting-item"><label>物体</label><input type="number" id="n_object" value="1" min="0"></div>
                <div class="setting-item"><label>雰囲気</label><input type="number" id="n_atm" value="1" min="0"></div>
            </div>

<button class="random-btn" onclick="generateRandomPrompt()">
                設定した個数でランダム生成する！
            </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>

// ---------------------------------------------------------
    // ■ 履歴管理機能
    // ---------------------------------------------------------
    const STORAGE_KEY = 'ai_image_instruction_history_v4'; // バージョン更新

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)];
        
        let allParts = [];

// UIのIDとデータキーの紐付け
        const config = [
            { id: 'n_scifi',    data: promptData.scifi },
            { id: 'n_fantasy',  data: promptData.fantasy },
            { id: 'n_nature',   data: promptData.nature },
            { id: 'n_daily',    data: promptData.daily },
            { id: 'n_time',     data: promptData.time },
            { id: 'n_style',    data: promptData.style },
            { id: 'n_creature', data: promptData.creature },
            { id: 'n_object',   data: promptData.object },
            { id: 'n_atm',      data: promptData.atm }
        ];

// 各設定をループして取得
        config.forEach(item => {
            const count = parseInt(document.getElementById(item.id).value) || 0;
            for(let i = 0; i < count; i++) {
                allParts.push(pick(item.data));
            }
        });

if (allParts.length === 0) {
            detailArea.value = "（要素が選択されていません。数値を1以上に設定してください）";
            return;
        }
        
        // 結合して表示
        detailArea.value = allParts.join("。\n") + "。";
        
        // アニメーション効果
        detailArea.style.borderColor = "#007bff";
        setTimeout(() => detailArea.style.borderColor = "#ccc", 300);
    }

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

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

saveToHistory(instruction);

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;
        }

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;
                    let msg = "プロンプトをコピーしました！\n\n" + serviceName + "が開きます。\n入力欄に「貼り付け（Ctrl+V）」して作成ボタンを押してください。";
                    
                    if(confirm(msg)) {
                        window.open(url, '_blank');
                    }
                });
            } else {
                alert("コピー機能が使えません。");
                window.open(url, '_blank');
            }
        }
    }
    </script>

</body>
</html>