<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>文章生成AIデモ（擬似生成強化版）</title>
<style>
body {
margin: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background: #f5f5f5;
color: #333;
}
header, footer {
background: #222;
color: #fff;
padding: 1.5em;
text-align: center;
}
header h1 {
margin: 0;
font-weight: normal;
}
main {
max-width: 1000px;
margin: 2em auto;
background: #fff;
border-radius: 8px;
padding: 2em;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
margin-top: 0;
}
.intro-text {
font-size: 0.95em;
line-height: 1.6;
margin-bottom: 2em;
color: #555;
}
.form-group {
margin-bottom: 1.5em;
}
label {
display: block;
margin-bottom: 0.5em;
font-weight: bold;
}
textarea {
width: 100%;
height: 150px;
box-sizing: border-box;
padding: 1em;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
select, input[type=range] {
width: 100%;
box-sizing: border-box;
padding: 0.5em;
font-size: 1em;
margin-top: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
.range-value {
text-align: right;
font-size: 0.9em;
color: #666;
}
button {
background: #007bff;
color: #fff;
border: none;
padding: 0.75em 1.5em;
font-size: 1em;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
button:hover {
background: #0056b3;
}
.output-section {
margin-top: 2em;
}
#output-area {
border: 1px solid #ccc;
min-height: 150px;
padding: 1em;
border-radius: 4px;
background: #fafafa;
white-space: pre-wrap;
}
/* ローディングアニメーション */
.loading-overlay {
display: none;
position: fixed;
top:0; left:0; right:0; bottom:0;
background: rgba(0,0,0,0.3);
z-index: 9999;
justify-content: center;
align-items: center;
}
.loading-container {
background: #fff;
padding: 2em;
border-radius: 8px;
text-align: center;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.loading-spinner {
margin: 0 auto 1em;
width: 50px;
height: 50px;
border: 6px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.error-message {
color: #d00;
font-weight: bold;
margin-top: 1em;
}
footer p {
margin: 0;
font-size: 0.9em;
}
/* レスポンシブ対応 */
@media (max-width: 600px) {
main {
margin: 1em;
padding: 1em;
}
}
</style>
</head>
<body>
<header>
<h1>文章生成AIデモ（擬似）</h1>
</header>
<main>
<div class="intro-text">
<p>このデモは擬似的な文章生成を行います。入力されたプロンプト、モデル選択、Temperatureに基づいてあたかもAIが文章を生成したかのような結果を返します。</p>
<p>実際のAIモデルはこのページ単体では動作しておらず、<b>キーワードに応じた例示的なテキスト</b>を返すだけです。後にサーバーサイドでバックエンドを用意すれば、本物のAI生成が可能になります。</p>
<p>試しに、以下のようなキーワードを含めてみてください：<br>
・「猫」：猫に関する創作文章<br>
・「エネルギー問題」：環境やエネルギーについての説明文<br>
・「小説の冒頭」：文学的な書き出し<br>
・「ビジネス戦略」：ビジネス、マーケティングに関連するテキスト
</p>
</div>
<section class="input-section">
<h2>プロンプト入力</h2>
<div class="form-group">
<label for="prompt-input">プロンプト (アイデアやキーワード等)</label>
<textarea id="prompt-input" placeholder="ここに文章生成のためのヒントとなるプロンプトを入力してください"></textarea>
</div>
<div class="form-group">
<label for="model-select">モデル選択</label>
<select id="model-select">
<option value="model-1">model-1 (標準モデル)</option>
<option value="model-2">model-2 (創造性強化モデル)</option>
<option value="model-3">model-3 (高精度モデル)</option>
</select>
</div>
<div class="form-group">
<label>創造性（Temperature）</label>
<div class="range-value">値: <span id="temperature-value">0.7</span></div>
<input type="range" id="temperature-range" min="0" max="1" step="0.1" value="0.7">
</div>
<div class="form-group" style="text-align: right;">
<button id="generate-btn">生成</button>
</div>
</section>
<section class="output-section">
<h2>生成結果</h2>
<div id="output-area"></div>
</section>
<div class="error-message" id="error-message" style="display:none;"></div>
</main>
<div class="loading-overlay" id="loading-overlay">
<div class="loading-container">
<div class="loading-spinner"></div>
<p>文章生成中です。しばらくお待ちください...</p>
</div>
</div>
<footer>
<p>© 2024 AI Text Generation Demo (Mocked)</p>
</footer>
<script>
const promptInput = document.getElementById('prompt-input');
const modelSelect = document.getElementById('model-select');
const temperatureRange = document.getElementById('temperature-range');
const temperatureValue = document.getElementById('temperature-value');
const generateBtn = document.getElementById('generate-btn');
const outputArea = document.getElementById('output-area');
const errorMessage = document.getElementById('error-message');
const loadingOverlay = document.getElementById('loading-overlay');
temperatureRange.addEventListener('input', () => {
temperatureValue.textContent = temperatureRange.value;
});
// キーワードに応じて返す擬似的な生成テキストを用意
function getMockResponse(prompt, model, temperature) {
// 全角・半角を区別しないために小文字で判定
const lowerPrompt = prompt.toLowerCase();
let baseText = "【擬似的なAI生成結果】\n";
baseText += "プロンプト: \"" + prompt + "\"\n";
baseText += "モデル: " + model + "\n";
baseText += "Temperature: " + temperature + "\n\n";
if (lowerPrompt.includes("猫")) {
baseText += "ふわふわした毛皮に包まれた小さな猫は、朝日が差し込む窓辺で静かに丸くなっている。その瞳は琥珀色に輝き、しなやかな尾は優雅な曲線を描く。\n" +
"この猫は人間に対して警戒心を持ちながらも、一度心を開いた相手には無限の甘えを見せる。";
} else if (lowerPrompt.includes("エネルギー問題") || lowerPrompt.includes("環境")) {
baseText += "世界的なエネルギー問題は、化石燃料の枯渇と気候変動への懸念を背景に深刻化している。再生可能エネルギーの導入は、ただ単に環境負荷を低減するだけでなく、地域経済の活性化や新たな技術開発の契機となる。\n" +
"太陽光や風力エネルギーなどのクリーンな資源を活用することで、持続可能な未来を築くことが可能だ。";
} else if (lowerPrompt.includes("小説の冒頭") || lowerPrompt.includes("物語の始まり")) {
baseText += "薄暗い路地裏に、一人の少年が立っていた。その少年の瞳には、不思議な光が宿っている。遠くで犬が吠える音、古い街灯が淡い橙色の光を投げかける。\n" +
"少年は一枚の古めかしい地図を握りしめ、見知らぬ世界への第一歩を踏み出そうとしていた。";
} else if (lowerPrompt.includes("ビジネス戦略") || lowerPrompt.includes("マーケティング")) {
baseText += "成功するビジネス戦略は、顧客ニーズの正確な把握から始まる。市場調査をもとに、ターゲット層に響く価値提案を明確化し、差別化された製品・サービスを提供することが重要だ。\n" +
"さらに、マーケティング戦略を通じてブランド認知度を高め、持続的な成長のために柔軟な計画修正とPDCAサイクルを回し続ける必要がある。";
} else {
// 特定のキーワードがない場合は、汎用的な擬似生成テキストを返す
baseText += "あなたのプロンプトに基づくテキストを生成します。\n" +
"このテキストはあくまでサンプルであり、実際のAIモデルによる生成結果を模したものです。\n\n" +
"ここに様々なアイディア、説明、物語、または議論が展開されることでしょう。\n" +
"モデルやTemperatureを変更することで、文体やアイデアの広がり、独創性のレベルが変化すると考えられます。";
}
return baseText;
}
generateBtn.addEventListener('click', async () => {
const prompt = promptInput.value.trim();
const model = modelSelect.value;
const temperature = parseFloat(temperatureRange.value);
if (!prompt) {
alert("プロンプトを入力してください。");
return;
}
// 前回の結果やエラーメッセージをクリア
outputArea.textContent = '';
errorMessage.style.display = 'none';
errorMessage.textContent = '';
// ローディング表示
loadingOverlay.style.display = 'flex';
try {
// 実際のfetchを行わず、擬似生成結果を生成
const generatedText = getMockResponse(prompt, model, temperature);
// 模擬的に処理時間を設ける（待ち時間を演出）
await new Promise(resolve => setTimeout(resolve, 1000));
outputArea.textContent = generatedText;
} catch (err) {
console.error(err);
errorMessage.textContent = "エラーが発生しました。詳細はコンソールをご確認ください。";
errorMessage.style.display = 'block';
} finally {
// ローディング非表示
loadingOverlay.style.display = 'none';
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>文章生成AIデモ（擬似生成強化版）</title>
<style>
body {
margin: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background: #f5f5f5;
color: #333;
}
header, footer {
background: #222;
color: #fff;
padding: 1.5em;
text-align: center;
}
header h1 {
margin: 0;
font-weight: normal;
}
main {
max-width: 1000px;
margin: 2em auto;
background: #fff;
border-radius: 8px;
padding: 2em;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
margin-top: 0;
}
.intro-text {
font-size: 0.95em;
line-height: 1.6;
margin-bottom: 2em;
color: #555;
}
.form-group {
margin-bottom: 1.5em;
}
label {
display: block;
margin-bottom: 0.5em;
font-weight: bold;
}
textarea {
width: 100%;
height: 150px;
box-sizing: border-box;
padding: 1em;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
select, input[type=range] {
width: 100%;
box-sizing: border-box;
padding: 0.5em;
font-size: 1em;
margin-top: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
.range-value {
text-align: right;
font-size: 0.9em;
color: #666;
}
button {
background: #007bff;
color: #fff;
border: none;
padding: 0.75em 1.5em;
font-size: 1em;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
button:hover {
background: #0056b3;
}
.output-section {
margin-top: 2em;
}
#output-area {
border: 1px solid #ccc;
min-height: 150px;
padding: 1em;
border-radius: 4px;
background: #fafafa;
white-space: pre-wrap;
}
/* ローディングアニメーション */
.loading-overlay {
display: none;
position: fixed;
top:0; left:0; right:0; bottom:0;
background: rgba(0,0,0,0.3);
z-index: 9999;
justify-content: center;
align-items: center;
}
.loading-container {
background: #fff;
padding: 2em;
border-radius: 8px;
text-align: center;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.loading-spinner {
margin: 0 auto 1em;
width: 50px;
height: 50px;
border: 6px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.error-message {
color: #d00;
font-weight: bold;
margin-top: 1em;
}
footer p {
margin: 0;
font-size: 0.9em;
}
/* レスポンシブ対応 */
@media (max-width: 600px) {
main {
margin: 1em;
padding: 1em;
}
}
</style>
</head>
<body>
<header>
<h1>文章生成AIデモ（擬似）</h1>
</header>
<main>
<div class="intro-text">
<p>このデモは擬似的な文章生成を行います。入力されたプロンプト、モデル選択、Temperatureに基づいてあたかもAIが文章を生成したかのような結果を返します。</p>
<p>実際のAIモデルはこのページ単体では動作しておらず、<b>キーワードに応じた例示的なテキスト</b>を返すだけです。後にサーバーサイドでバックエンドを用意すれば、本物のAI生成が可能になります。</p>
<p>試しに、以下のようなキーワードを含めてみてください：<br>
・「猫」：猫に関する創作文章<br>
・「エネルギー問題」：環境やエネルギーについての説明文<br>
・「小説の冒頭」：文学的な書き出し<br>
・「ビジネス戦略」：ビジネス、マーケティングに関連するテキスト
</p>
</div>
<section class="input-section">
<h2>プロンプト入力</h2>
<div class="form-group">
<label for="prompt-input">プロンプト (アイデアやキーワード等)</label>
<textarea id="prompt-input" placeholder="ここに文章生成のためのヒントとなるプロンプトを入力してください"></textarea>
</div>
<div class="form-group">
<label for="model-select">モデル選択</label>
<select id="model-select">
<option value="model-1">model-1 (標準モデル)</option>
<option value="model-2">model-2 (創造性強化モデル)</option>
<option value="model-3">model-3 (高精度モデル)</option>
</select>
</div>
<div class="form-group">
<label>創造性（Temperature）</label>
<div class="range-value">値: <span id="temperature-value">0.7</span></div>
<input type="range" id="temperature-range" min="0" max="1" step="0.1" value="0.7">
</div>
<div class="form-group" style="text-align: right;">
<button id="generate-btn">生成</button>
</div>
</section>
<section class="output-section">
<h2>生成結果</h2>
<div id="output-area"></div>
</section>
<div class="error-message" id="error-message" style="display:none;"></div>
</main>
<div class="loading-overlay" id="loading-overlay">
<div class="loading-container">
<div class="loading-spinner"></div>
<p>文章生成中です。しばらくお待ちください...</p>
</div>
</div>
<footer>
<p>© 2024 AI Text Generation Demo (Mocked)</p>
</footer>
<script>
const promptInput = document.getElementById('prompt-input');
const modelSelect = document.getElementById('model-select');
const temperatureRange = document.getElementById('temperature-range');
const temperatureValue = document.getElementById('temperature-value');
const generateBtn = document.getElementById('generate-btn');
const outputArea = document.getElementById('output-area');
const errorMessage = document.getElementById('error-message');
const loadingOverlay = document.getElementById('loading-overlay');
temperatureRange.addEventListener('input', () => {
temperatureValue.textContent = temperatureRange.value;
});
// キーワードに応じて返す擬似的な生成テキストを用意
function getMockResponse(prompt, model, temperature) {
// 全角・半角を区別しないために小文字で判定
const lowerPrompt = prompt.toLowerCase();
let baseText = "【擬似的なAI生成結果】\n";
baseText += "プロンプト: \"" + prompt + "\"\n";
baseText += "モデル: " + model + "\n";
baseText += "Temperature: " + temperature + "\n\n";
if (lowerPrompt.includes("猫")) {
baseText += "ふわふわした毛皮に包まれた小さな猫は、朝日が差し込む窓辺で静かに丸くなっている。その瞳は琥珀色に輝き、しなやかな尾は優雅な曲線を描く。\n" +
"この猫は人間に対して警戒心を持ちながらも、一度心を開いた相手には無限の甘えを見せる。";
} else if (lowerPrompt.includes("エネルギー問題") || lowerPrompt.includes("環境")) {
baseText += "世界的なエネルギー問題は、化石燃料の枯渇と気候変動への懸念を背景に深刻化している。再生可能エネルギーの導入は、ただ単に環境負荷を低減するだけでなく、地域経済の活性化や新たな技術開発の契機となる。\n" +
"太陽光や風力エネルギーなどのクリーンな資源を活用することで、持続可能な未来を築くことが可能だ。";
} else if (lowerPrompt.includes("小説の冒頭") || lowerPrompt.includes("物語の始まり")) {
baseText += "薄暗い路地裏に、一人の少年が立っていた。その少年の瞳には、不思議な光が宿っている。遠くで犬が吠える音、古い街灯が淡い橙色の光を投げかける。\n" +
"少年は一枚の古めかしい地図を握りしめ、見知らぬ世界への第一歩を踏み出そうとしていた。";
} else if (lowerPrompt.includes("ビジネス戦略") || lowerPrompt.includes("マーケティング")) {
baseText += "成功するビジネス戦略は、顧客ニーズの正確な把握から始まる。市場調査をもとに、ターゲット層に響く価値提案を明確化し、差別化された製品・サービスを提供することが重要だ。\n" +
"さらに、マーケティング戦略を通じてブランド認知度を高め、持続的な成長のために柔軟な計画修正とPDCAサイクルを回し続ける必要がある。";
} else {
// 特定のキーワードがない場合は、汎用的な擬似生成テキストを返す
baseText += "あなたのプロンプトに基づくテキストを生成します。\n" +
"このテキストはあくまでサンプルであり、実際のAIモデルによる生成結果を模したものです。\n\n" +
"ここに様々なアイディア、説明、物語、または議論が展開されることでしょう。\n" +
"モデルやTemperatureを変更することで、文体やアイデアの広がり、独創性のレベルが変化すると考えられます。";
}
return baseText;
}
generateBtn.addEventListener('click', async () => {
const prompt = promptInput.value.trim();
const model = modelSelect.value;
const temperature = parseFloat(temperatureRange.value);
if (!prompt) {
alert("プロンプトを入力してください。");
return;
}
// 前回の結果やエラーメッセージをクリア
outputArea.textContent = '';
errorMessage.style.display = 'none';
errorMessage.textContent = '';
// ローディング表示
loadingOverlay.style.display = 'flex';
try {
// 実際のfetchを行わず、擬似生成結果を生成
const generatedText = getMockResponse(prompt, model, temperature);
// 模擬的に処理時間を設ける（待ち時間を演出）
await new Promise(resolve => setTimeout(resolve, 1000));
outputArea.textContent = generatedText;
} catch (err) {
console.error(err);
errorMessage.textContent = "エラーが発生しました。詳細はコンソールをご確認ください。";
errorMessage.style.display = 'block';
} finally {
// ローディング非表示
loadingOverlay.style.display = 'none';
}
});
</script>
</body>
</html>
