2
3

ヴァーチャルコンテンツを作るゲーム。

Last updated at Posted at 2024-08-30

GPT2で生成されたHTMLファイルを自動的にブラウザで表示するゲームです。

スクリーンショット 2024-08-30 163557.png

生成テキストは英語ですが、ブラウザの翻訳機能で翻訳できます。

スクリーンショット 2024-08-30 163624.png

スクリーンショット 2024-08-30 163700.png

スクリーンショット 2024-08-30 163711.png

スクリーンショット 2024-08-30 163722.png

スクリーンショット 2024-08-30 163732.png

スクリーンショット 2024-08-30 163745.png

import http.server
import socketserver
import webbrowser
import os
from transformers import GPT2LMHeadModel, GPT2Tokenizer

# モデルとトークナイザーの読み込み
model_name = 'gpt2'
tokenizer = GPT2Tokenizer.from_pretrained(model_name)
model = GPT2LMHeadModel.from_pretrained(model_name)

# テキスト生成関数
def generate_text(prompt, max_length=150, num_return_sequences=1):
    inputs = tokenizer.encode(prompt, return_tensors='pt')
    outputs = model.generate(
        inputs,
        max_length=max_length,
        num_return_sequences=num_return_sequences,
        no_repeat_ngram_size=2,
        top_k=50,
        top_p=0.95,
        temperature=0.7
    )
    return [tokenizer.decode(output, skip_special_tokens=True) for output in outputs]

# テーマごとのプロンプト
themes = [
    "Exploration of future technologies",
    "Myths of ancient civilizations",
    "Ethics of artificial intelligence",
    "Advancements in space exploration",
    "Future of sustainable energy sources",
    "Impact of climate change on wildlife",
    "Future of autonomous vehicles",
    "Role of quantum computing in modern science",
    "Evolution of digital art",
    "Challenges in modern education",
    "Space tourism prospects",
    "Developments in biotechnology",
    "Future of renewable energy",
    "Social implications of robotics",
    "Emerging trends in virtual reality",
    "Innovations in medical technology",
    "Impact of social media on communication",
    "Future of urban planning",
    "Advancements in nanotechnology",
    "Ethical considerations in genetic engineering"
]

# HTMLファイルの生成
html_file = 'blog_article.html'
html_content = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Article</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        header {
            background: green;
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        article {
            margin: 20px 0;
            padding: 20px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h2 {
            color: green;
        }
    </style>
</head>
<body>
    <header>
        <h1>Blog Article</h1>
    </header>
    <div class="container">
'''

# テーマごとのテキスト生成とHTMLに追加
for theme in themes:
    generated_text = generate_text(theme, max_length=150, num_return_sequences=1)[0]
    html_content += f'''
        <article>
            <h2>{theme}</h2>
            <p>{generated_text}</p>
        </article>
    '''

# HTMLファイルの締めくくり
html_content += '''
    </div>
</body>
</html>
'''

# HTMLファイルに書き出し
with open(html_file, 'w', encoding='utf-8') as file:
    file.write(html_content)

print(f"HTML file '{html_file}' created successfully.")

# HTTPサーバーの設定
PORT = 8000
DIRECTORY = os.getcwd()

class Handler(http.server.SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header('Access-Control-Allow-Origin', '*')
        super().end_headers()

def start_server():
    os.chdir(DIRECTORY)
    with socketserver.TCPServer(("", PORT), Handler) as httpd:
        print(f"Serving at http://localhost:{PORT}")
        webbrowser.open(f'http://localhost:{PORT}/{html_file}')
        httpd.serve_forever()

if __name__ == "__main__":
    start_server()

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3