1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 | <span class="dec"><!DOCTYPE html></span><span class="pln"></span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"ja"</span><span class="tag">></span><span class="pln"></span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">/></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">/></span><span class="pln"> </span><span class="tag"><title></span><span class="pln">文章生成AIデモ（擬似生成強化版）</span><span class="tag"></title></span><span class="pln"> </span><span class="tag"><style></span><span class="pln"> body </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Helvetica Neue'</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Arial</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f5f5f5;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#333;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> header</span><span class="pun">,</span><span class="pln"> footer </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#222;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.5em</span><span class="pun">;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> header h1 </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> normal</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> main </span><span class="pun">{</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1000px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2em</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2em</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0.1</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> h2 </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">intro</span><span class="pun">-</span><span class="pln">text </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.95em</span><span class="pun">;</span><span class="pln"> line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.6</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2em</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#555;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">form</span><span class="pun">-</span><span class="kwd">group</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.5em</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> label </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.5em</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> textarea </span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">150px</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">sizing</span><span class="pun">:</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">box</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1em</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1em</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ccc;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> resize</span><span class="pun">:</span><span class="pln"> vertical</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">select</span><span class="pun">,</span><span class="pln"> input</span><span class="pun">[</span><span class="pln">type</span><span class="pun">=</span><span class="pln">range</span><span class="pun">]</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">sizing</span><span class="pun">:</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">box</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.5em</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1em</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.5em</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ccc;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">range</span><span class="pun">-</span><span class="kwd">value</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.9em</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#666;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> button </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#007bff;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.75em</span><span class="pln"> </span><span class="lit">1.5em</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1em</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">inline</span><span class="pun">-</span><span class="pln">block</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> button</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#0056b3;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">output</span><span class="pun">-</span><span class="pln">section </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2em</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">#output-area {</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ccc;</span><span class="pln"> min</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">150px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1em</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fafafa;</span><span class="pln"> white</span><span class="pun">-</span><span class="pln">space</span><span class="pun">:</span><span class="pln"> pre</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* ローディングアニメーション */</span><span class="pln"> </span><span class="pun">.</span><span class="pln">loading</span><span class="pun">-</span><span class="pln">overlay </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">fixed</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> left</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> right</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> bottom</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0.3</span><span class="pun">);</span><span class="pln"> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="pln"> </span><span class="lit">9999</span><span class="pun">;</span><span class="pln"> justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> align</span><span class="pun">-</span><span class="pln">items</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">loading</span><span class="pun">-</span><span class="pln">container </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2em</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8px</span><span class="pun">;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">15px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0.2</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">loading</span><span class="pun">-</span><span class="pln">spinner </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="kwd">auto</span><span class="pln"> </span><span class="lit">1em</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">6px</span><span class="pln"> solid </span><span class="com">#eee;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">top</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#007bff;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50</span><span class="pun">%;</span><span class="pln"> animation</span><span class="pun">:</span><span class="pln"> spin </span><span class="lit">1s</span><span class="pln"> linear infinite</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="lit">@keyframes</span><span class="pln"> spin </span><span class="pun">{</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> transform</span><span class="pun">:</span><span class="pln"> rotate</span><span class="pun">(</span><span class="lit">360deg</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">error</span><span class="pun">-</span><span class="pln">message </span><span class="pun">{</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#d00;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1em</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> footer p </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.9em</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* レスポンシブ対応 */</span><span class="pln"> </span><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">600px</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> main </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1em</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1em</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="tag"></style></span><span class="pln"></span><span class="tag"></head></span><span class="pln"></span><span class="tag"><body></span><span class="pln"> </span><span class="tag"><header></span><span class="pln"> </span><span class="tag"><h1></span><span class="pln">文章生成AIデモ（擬似）</span><span class="tag"></h1></span><span class="pln"> </span><span class="tag"></header></span><span class="pln"> </span><span class="tag"><main></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"intro-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">このデモは擬似的な文章生成を行います。入力されたプロンプト、モデル選択、Temperatureに基づいてあたかもAIが文章を生成したかのような結果を返します。</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">実際のAIモデルはこのページ単体では動作しておらず、</span><span class="tag"><b></span><span class="pln">キーワードに応じた例示的なテキスト</span><span class="tag"></b></span><span class="pln">を返すだけです。後にサーバーサイドでバックエンドを用意すれば、本物のAI生成が可能になります。</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">試しに、以下のようなキーワードを含めてみてください：</span><span class="tag"><br></span><span class="pln"> ・「猫」：猫に関する創作文章</span><span class="tag"><br></span><span class="pln"> ・「エネルギー問題」：環境やエネルギーについての説明文</span><span class="tag"><br></span><span class="pln"> ・「小説の冒頭」：文学的な書き出し</span><span class="tag"><br></span><span class="pln"> ・「ビジネス戦略」：ビジネス、マーケティングに関連するテキスト </span><span class="tag"></p></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><section</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-section"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">プロンプト入力</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"prompt-input"</span><span class="tag">></span><span class="pln">プロンプト (アイデアやキーワード等)</span><span class="tag"></label></span><span class="pln"> </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"prompt-input"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"ここに文章生成のためのヒントとなるプロンプトを入力してください"</span><span class="tag">></textarea></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"model-select"</span><span class="tag">></span><span class="pln">モデル選択</span><span class="tag"></label></span><span class="pln"> </span><span class="tag"><select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"model-select"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"model-1"</span><span class="tag">></span><span class="pln">model-1 (標準モデル)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"model-2"</span><span class="tag">></span><span class="pln">model-2 (創造性強化モデル)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"model-3"</span><span class="tag">></span><span class="pln">model-3 (高精度モデル)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"></select></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><label></span><span class="pln">創造性（Temperature）</span><span class="tag"></label></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"range-value"</span><span class="tag">></span><span class="pln">値: </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"temperature-value"</span><span class="tag">></span><span class="pln">0.7</span><span class="tag"></span></div></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"range"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"temperature-range"</span><span class="pln"> </span><span class="atn">min</span><span class="pun">=</span><span class="atv">"0"</span><span class="pln"> </span><span class="atn">max</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">step</span><span class="pun">=</span><span class="atv">"0.1"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"0.7"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"generate-btn"</span><span class="tag">></span><span class="pln">生成</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></section></span><span class="pln"> </span><span class="tag"><section</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"output-section"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">生成結果</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"output-area"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"></section></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"error-message"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"error-message"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"></main></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"loading-overlay"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"loading-overlay"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"loading-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"loading-spinner"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">文章生成中です。しばらくお待ちください...</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><footer></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">© 2024 AI Text Generation Demo (Mocked)</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"></footer></span><span class="pln"> </span><span class="tag"><script></span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> promptInput </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'prompt-input'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> modelSelect </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'model-select'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> temperatureRange </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'temperature-range'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> temperatureValue </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'temperature-value'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> generateBtn </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'generate-btn'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> outputArea </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'output-area'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> errorMessage </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'error-message'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> loadingOverlay </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loading-overlay'</span><span class="pun">);</span><span class="pln"> temperatureRange</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'input'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> temperatureValue</span><span class="pun">.</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> temperatureRange</span><span class="pun">.</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="com">// キーワードに応じて返す擬似的な生成テキストを用意</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> getMockResponse</span><span class="pun">(</span><span class="pln">prompt</span><span class="pun">,</span><span class="pln"> model</span><span class="pun">,</span><span class="pln"> temperature</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// 全角・半角を区別しないために小文字で判定</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> lowerPrompt </span><span class="pun">=</span><span class="pln"> prompt</span><span class="pun">.</span><span class="pln">toLowerCase</span><span class="pun">();</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> baseText </span><span class="pun">=</span><span class="pln"> </span><span class="str">"【擬似的なAI生成結果】\n"</span><span class="pun">;</span><span class="pln"> baseText </span><span class="pun">+=</span><span class="pln"> </span><span class="str">"プロンプト: \""</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> prompt </span><span class="pun">+</span><span class="pln"> </span><span class="str">"\"\n"</span><span class="pun">;</span><span class="pln"> baseText </span><span class="pun">+=</span><span class="pln"> </span><span class="str">"モデル: "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> model </span><span class="pun">+</span><span class="pln"> </span><span class="str">"\n"</span><span class="pun">;</span><span class="pln"> baseText </span><span class="pun">+=</span><span class="pln"> </span><span class="str">"Temperature: "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> temperature </span><span class="pun">+</span><span class="pln"> </span><span class="str">"\n\n"</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">lowerPrompt</span><span class="pun">.</span><span class="pln">includes</span><span class="pun">(</span><span class="str">"猫"</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> baseText </span><span class="pun">+=</span><span class="pln"> </span><span class="str">"ふわふわした毛皮に包まれた小さな猫は、朝日が差し込む窓辺で静かに丸くなっている。その瞳は琥珀色に輝き、しなやかな尾は優雅な曲線を描く。\n"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"この猫は人間に対して警戒心を持ちながらも、一度心を開いた相手には無限の甘えを見せる。"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">lowerPrompt</span><span class="pun">.</span><span class="pln">includes</span><span class="pun">(</span><span class="str">"エネルギー問題"</span><span class="pun">)</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> lowerPrompt</span><span class="pun">.</span><span class="pln">includes</span><span class="pun">(</span><span class="str">"環境"</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> baseText </span><span class="pun">+=</span><span class="pln"> </span><span class="str">"世界的なエネルギー問題は、化石燃料の枯渇と気候変動への懸念を背景に深刻化している。再生可能エネルギーの導入は、ただ単に環境負荷を低減するだけでなく、地域経済の活性化や新たな技術開発の契機となる。\n"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"太陽光や風力エネルギーなどのクリーンな資源を活用することで、持続可能な未来を築くことが可能だ。"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">lowerPrompt</span><span class="pun">.</span><span class="pln">includes</span><span class="pun">(</span><span class="str">"小説の冒頭"</span><span class="pun">)</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> lowerPrompt</span><span class="pun">.</span><span class="pln">includes</span><span class="pun">(</span><span class="str">"物語の始まり"</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> baseText </span><span class="pun">+=</span><span class="pln"> </span><span class="str">"薄暗い路地裏に、一人の少年が立っていた。その少年の瞳には、不思議な光が宿っている。遠くで犬が吠える音、古い街灯が淡い橙色の光を投げかける。\n"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"少年は一枚の古めかしい地図を握りしめ、見知らぬ世界への第一歩を踏み出そうとしていた。"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">lowerPrompt</span><span class="pun">.</span><span class="pln">includes</span><span class="pun">(</span><span class="str">"ビジネス戦略"</span><span class="pun">)</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> lowerPrompt</span><span class="pun">.</span><span class="pln">includes</span><span class="pun">(</span><span class="str">"マーケティング"</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> baseText </span><span class="pun">+=</span><span class="pln"> </span><span class="str">"成功するビジネス戦略は、顧客ニーズの正確な把握から始まる。市場調査をもとに、ターゲット層に響く価値提案を明確化し、差別化された製品・サービスを提供することが重要だ。\n"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"さらに、マーケティング戦略を通じてブランド認知度を高め、持続的な成長のために柔軟な計画修正とPDCAサイクルを回し続ける必要がある。"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// 特定のキーワードがない場合は、汎用的な擬似生成テキストを返す</span><span class="pln"> baseText </span><span class="pun">+=</span><span class="pln"> </span><span class="str">"あなたのプロンプトに基づくテキストを生成します。\n"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"このテキストはあくまでサンプルであり、実際のAIモデルによる生成結果を模したものです。\n\n"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"ここに様々なアイディア、説明、物語、または議論が展開されることでしょう。\n"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"モデルやTemperatureを変更することで、文体やアイデアの広がり、独創性のレベルが変化すると考えられます。"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> baseText</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> generateBtn</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">async</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> prompt </span><span class="pun">=</span><span class="pln"> promptInput</span><span class="pun">.</span><span class="pln">value</span><span class="pun">.</span><span class="pln">trim</span><span class="pun">();</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> model </span><span class="pun">=</span><span class="pln"> modelSelect</span><span class="pun">.</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> temperature </span><span class="pun">=</span><span class="pln"> parseFloat</span><span class="pun">(</span><span class="pln">temperatureRange</span><span class="pun">.</span><span class="pln">value</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">prompt</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"プロンプトを入力してください。"</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">return</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// 前回の結果やエラーメッセージをクリア</span><span class="pln"> outputArea</span><span class="pun">.</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> errorMessage</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> errorMessage</span><span class="pun">.</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> </span><span class="com">// ローディング表示</span><span class="pln"> loadingOverlay</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'flex'</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">try</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// 実際のfetchを行わず、擬似生成結果を生成</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> generatedText </span><span class="pun">=</span><span class="pln"> getMockResponse</span><span class="pun">(</span><span class="pln">prompt</span><span class="pun">,</span><span class="pln"> model</span><span class="pun">,</span><span class="pln"> temperature</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 模擬的に処理時間を設ける（待ち時間を演出）</span><span class="pln"> </span><span class="kwd">await</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">(</span><span class="pln">resolve </span><span class="pun">=></span><span class="pln"> setTimeout</span><span class="pun">(</span><span class="pln">resolve</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">));</span><span class="pln"> outputArea</span><span class="pun">.</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> generatedText</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">catch</span><span class="pln"> </span><span class="pun">(</span><span class="pln">err</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">error</span><span class="pun">(</span><span class="pln">err</span><span class="pun">);</span><span class="pln"> errorMessage</span><span class="pun">.</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> </span><span class="str">"エラーが発生しました。詳細はコンソールをご確認ください。"</span><span class="pun">;</span><span class="pln"> errorMessage</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> finally </span><span class="pun">{</span><span class="pln"> </span><span class="com">// ローディング非表示</span><span class="pln"> loadingOverlay</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="tag"></script></span><span class="pln"></span><span class="tag"></body></span><span class="pln"></span><span class="tag"></html></span><span class="pln"></span> |
<!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>