マルコフ連鎖テキストをつくってみた。

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JavaScript生成AI - オールインワン</title>

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>

    <style>

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {

            font-family: 'Segoe UI', system-ui, sans-serif;

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            min-height: 100vh;

            padding: 20px;

        }

        .container {

            max-width: 1200px;

            margin: 0 auto;

        }

        h1 {

            text-align: center;

            color: white;

            margin-bottom: 30px;

            font-size: 2.5em;

            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);

        }

        .tabs {

            display: flex;

            gap: 5px;

            margin-bottom: 20px;

            flex-wrap: wrap;

        }

        .tab-btn {

            padding: 12px 24px;

            border: none;

            background: rgba(255,255,255,0.2);

            color: white;

            cursor: pointer;

            border-radius: 10px 10px 0 0;

            font-size: 16px;

            transition: all 0.3s;

            backdrop-filter: blur(10px);

        }

        .tab-btn.active {

            background: white;

            color: #667eea ;

            font-weight: bold;

        }

        .tab-content {

            display: none;

            background: white;

            border-radius: 0 15px 15px 15px;

            padding: 30px;

            box-shadow: 0 20px 60px rgba(0,0,0,0.3);

            min-height: 500px;

        }

        .tab-content.active { display: block; }

        textarea, input[type="text"] {

            width: 100%;

            padding: 12px;

            border: 2px solid #e0e0e0 ;

            border-radius: 8px;

            font-size: 14px;

            margin-bottom: 15px;

            font-family: monospace;

        }

        textarea { min-height: 120px; resize: vertical; }

        button {

            padding: 12px 30px;

            border: none;

            border-radius: 8px;

            font-size: 16px;

            cursor: pointer;

            font-weight: bold;

            transition: all 0.3s;

            margin: 5px;

        }

        .btn-primary {

            background: linear-gradient(135deg, #667eea , #764ba2 );

            color: white;

        }

        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102,126,234,0.4); }

        .btn-secondary {

            background: #f0f0f0 ;

            color: #333 ;

        }

        .btn-secondary:hover { background: #e0e0e0 ; }

        .output-box {

            background: #f8f9fa ;

            border: 1px solid #e0e0e0 ;

            border-radius: 8px;

            padding: 15px;

            margin-top: 15px;

            min-height: 80px;

            white-space: pre-wrap;

            word-wrap: break-word;

            font-family: monospace;

            line-height: 1.6;

        }

        .canvas-container {

            display: flex;

            gap: 20px;

            flex-wrap: wrap;

            justify-content: center;

            margin-top: 20px;

        }

        canvas {

            border: 2px solid #e0e0e0 ;

            border-radius: 8px;

            background: white;

        }

        .controls {

            display: flex;

            gap: 10px;

            flex-wrap: wrap;

            align-items: center;

            margin-bottom: 15px;

        }

        label {

            font-weight: bold;

            color: #555 ;

            min-width: 80px;

        }

        input[type="range"] { flex: 1; }

        .stats {

            display: flex;

            gap: 15px;

            flex-wrap: wrap;

            margin: 15px 0;

            padding: 15px;

            background: #f0f4ff ;

            border-radius: 8px;

        }

        .stat-item {

            flex: 1;

            min-width: 100px;

            text-align: center;

            padding: 10px;

            background: white;

            border-radius: 8px;

            box-shadow: 0 2px 5px rgba(0,0,0,0.1);

        }

        .stat-value {

            font-size: 24px;

            font-weight: bold;

            color: #667eea ;

        }

        .stat-label { color: #777 ; font-size: 14px; }

        .model-info {

            background: #fff3cd ;

            border-left: 4px solid #ffc107 ;

            padding: 12px;

            margin: 10px 0;

            border-radius: 5px;

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>🤖 JavaScript生成AI</h1>

        <div class="tabs">

            <button class="tab-btn active" onclick="switchTab('text')">📝 テキスト生成</button>

            <button class="tab-btn" onclick="switchTab('neural')">🧠 ニューラル生成</button>

            <button class="tab-btn" onclick="switchTab('image')">🎨 画像生成</button>

            <button class="tab-btn" onclick="switchTab('vae')">🔮 VAE生成</button>

            <button class="tab-btn" onclick="switchTab('api')">⚡ APIデモ</button>

        </div>

        <!-- テキスト生成タブ -->

        <div id="text-tab" class="tab-content active">

            <h2>マルコフ連鎖テキスト生成</h2>

            <div class="model-info">

                ℹ️ テキストの統計的パターンを学習し、新しい文章を生成します。学習データが多いほど自然な出力になります。

            </div>

            <div class="controls">

                <label>N-gram:</label>

                <select id="ngramSize">

                    <option value="1">1-gram (単語単位)</option>

                    <option value="2" selected>2-gram (推奨)</option>

                    <option value="3">3-gram (より一貫性)</option>

                </select>

                <label>生成長:</label>

                <input type="number" id="textGenLength" value="30" min="5" max="100" style="width:80px;">

            </div>

            <textarea id="trainingText" placeholder="学習テキストを入力してください...">私は猫が大好きです。猫はとても可愛い動物です。毎日猫と遊ぶのが楽しみです。猫は気まぐれですが、そこが魅力です。私は犬も好きです。犬は忠実で優しいです。でも、やっぱり猫が一番好きです。猫のしなやかな動きは美しいです。猫の瞳は宝石のように輝いています。猫と一緒に暮らせて幸せです。</textarea>

            <div>

                <button class="btn-primary" onclick="trainMarkovModel()">🔄 学習して生成</button>

                <button class="btn-secondary" onclick="generateMoreText()">🔁 別パターン生成</button>

            </div>

            <div class="output-box" id="textOutput">ここに生成テキストが表示されます...</div>

            <div class="stats" id="textStats">

                <div class="stat-item">

                    <div class="stat-value" id="vocabSize">0</div>

                    <div class="stat-label">語彙数</div>

                </div>

                <div class="stat-item">

                    <div class="stat-value" id="patternCount">0</div>

                    <div class="stat-label">学習パターン</div>

                </div>

                <div class="stat-item">

                    <div class="stat-value" id="genLength">0</div>

                    <div class="stat-label">生成文字数</div>

                </div>

            </div>

        </div>

        <!-- ニューラルネットワーク生成タブ -->

        <div id="neural-tab" class="tab-content">

            <h2>シンプルニューラルネットワーク生成</h2>

            <div class="model-info">

                ℹ️ 簡易的なニューラルネットワークで単語の出現パターンを学習します。より自然な遷移確率を学習可能です。

            </div>

            <div class="controls">

                <label>開始単語:</label>

                <input type="text" id="startWord" value="私" placeholder="生成を開始する単語" style="width:150px;">

                <label>温度:</label>

                <input type="range" id="temperature" min="0.1" max="2" step="0.1" value="0.8" style="width:150px;">

                <span id="tempValue">0.8</span>

            </div>

            <textarea id="neuralTrainingText" placeholder="学習テキストを入力してください...">私は毎日朝ごはんを食べます。朝ごはんは美味しいです。私はパンが好きです。パンにはバターを塗ります。コーヒーも飲みます。朝は忙しいですが、朝ごはんは大切です。</textarea>

            <div>

                <button class="btn-primary" onclick="trainNeuralModel()">🧠 学習して生成</button>

                <button class="btn-secondary" onclick="continueGeneration()">▶ 続きを生成</button>

            </div>

            <div class="output-box" id="neuralOutput">ここにニューラルネットワークの生成結果が表示されます...</div>

        </div>

        <!-- 画像生成タブ -->

        <div id="image-tab" class="tab-content">

            <h2>プロシージャル画像生成</h2>

            <div class="model-info">

                ℹ️ 数学的関数とノイズを使って抽象的な画像を生成します。パラメータを変えると様々なパターンが得られます。

            </div>

            <div class="controls">

                <label>スタイル:</label>

                <select id="imageStyle">

                    <option value="noise">パーリンノイズ</option>

                    <option value="geometric">幾何学模様</option>

                    <option value="psychedelic">サイケデリック</option>

                    <option value="waves">波形パターン</option>

                </select>

                <label>複雑さ:</label>

                <input type="range" id="complexity" min="1" max="10" value="5" style="width:150px;">

                <span id="compValue">5</span>

            </div>

            <div>

                <button class="btn-primary" onclick="generateArtImage()">🎨 画像を生成</button>

                <button class="btn-secondary" onclick="downloadImage()">💾 画像を保存</button>

            </div>

            <div class="canvas-container">

                <canvas id="artCanvas" width="400" height="400"></canvas>

                <canvas id="smallCanvas" width="200" height="200"></canvas>

            </div>

        </div>

        <!-- VAE生成タブ -->

        <div id="vae-tab" class="tab-content">

            <h2>VAE (Variational Autoencoder) 生成</h2>

            <div class="model-info">

                ℹ️ TensorFlow.jsを使用した深層学習モデルです。学習には時間がかかりますが、より高度なパターン生成が可能です。

            </div>

            <div class="controls">

                <label>潜在次元:</label>

                <input type="number" id="latentDim" value="16" min="2" max="64" style="width:80px;">

                <label>エポック:</label>

                <input type="number" id="epochs" value="10" min="1" max="50" style="width:80px;">