GPT-2とWikipediaを使って生成するAI

GPT-2.py

from flask import Flask, render_template, request, redirect, url_for
from transformers import GPT2Tokenizer, GPT2LMHeadModel
import wikipedia

app = Flask(__name__)

# GPT-2のトークナイザーとモデルをロード
tokenizer = GPT2Tokenizer.from_pretrained("gpt2")
model = GPT2LMHeadModel.from_pretrained("gpt2")

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/generate', methods=['POST'])
def generate_text():
    # ユーザーからの入力を取得
    prompt_text = request.form['prompt']
    
    try:
        # Wikipediaからテキストを取得
        wikipedia_text = wikipedia.summary(prompt_text)
        
        # テキストの生成
        inputs = tokenizer.encode(wikipedia_text, return_tensors="pt")
        outputs = model.generate(inputs, max_length=100, num_return_sequences=1, temperature=0.7)
        
        # 生成されたテキストをデコードしてHTMLコードに組み込む
        generated_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
        
        # 生成されたテキストとWikipediaのテキストと共にHTMLを返す
        return render_template('index.html', prompt_text=prompt_text, generated_text=generated_text, wikipedia_text=wikipedia_text)
    
    except wikipedia.exceptions.DisambiguationError as e:
        # 曖昧性がある場合は、候補のリストを表示
        options = e.options
        return render_template('disambiguation.html', options=options)
    
    except wikipedia.exceptions.PageError:
        wikipedia_text = "Wikipediaにそのトピックが見つかりませんでした。"
        return render_template('index.html', prompt_text=prompt_text, wikipedia_text=wikipedia_text)

@app.route('/generate_with_option/<option>', methods=['GET'])
def generate_with_option(option):
    try:
        # Wikipediaからテキストを取得
        wikipedia_text = wikipedia.summary(option)
        
        # テキストの生成
        inputs = tokenizer.encode(wikipedia_text, return_tensors="pt")
        outputs = model.generate(inputs, max_length=100, num_return_sequences=1, temperature=0.7)
        
        # 生成されたテキストをデコードしてHTMLコードに組み込む
        generated_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
        
        # 生成されたテキストとWikipediaのテキストと共にHTMLを返す
        return render_template('index.html', prompt_text=option, generated_text=generated_text, wikipedia_text=wikipedia_text)
    
    except wikipedia.exceptions.PageError:
        wikipedia_text = "Wikipediaにそのトピックが見つかりませんでした。"
        return render_template('index.html', prompt_text=option, wikipedia_text=wikipedia_text)

if __name__ == '__main__':
    app.run(debug=True)

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate Text</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        h1 {
            text-align: center;
            margin-top: 50px;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            font-weight: bold;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        .response {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .generated-text {
            margin-top: 20px;
        }

        .tweet-link {
            display: block;
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Generate Text</h1>
    <form action="/generate" method="POST">
        <label for="prompt">Enter your prompt:</label><br>
        <input type="text" id="prompt" name="prompt"><br><br>
        <button type="submit">Generate</button>
    </form>

    <!-- 生成されたテキストを表示 -->
    {% if generated_text %}
    <div class="response">
        <h2>Generated Text:</h2>
        <p class="generated-text">{{ generated_text }}</p>
        <a href="https://twitter.com/intent/tweet?text={{ generated_text }}" class="tweet-link" target="_blank">Tweet</a>
    </div>
    {% endif %}
</body>
</html>

templates/disambiguation.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disambiguation Page</title>
</head>
<body>
    <h1>Disambiguation</h1>
    <p>Multiple meanings were found for the provided prompt. Please select the intended meaning:</p>
    <ul>
        {% for option in options %}
            <li><a href="{{ url_for('generate_with_option', option=option) }}">{{ option }}</a></li>
        {% endfor %}
    </ul>
</body>
</html>

HTMLCSSJavascript Canvas

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Canvas</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <canvas width="600" height="240">
    Canvas not supported.
  </canvas>

  <script src="js/main.js"></script>
</body>
</html>

css/styles.css

body {
  background: #222;
}
canvas {
  background: #fff;
}

js/main.js

'use strict';

{
  let t = 0;
  
  function draw() {
    const canvas = document.querySelector('canvas');
    if (typeof canvas.getContext === 'undefined') {
      return;
    }
    const ctx = canvas.getContext('2d');
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.beginPath();
    ctx.ellipse(100, 100, 40, 30, 0, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();
    
    ctx.beginPath();
    ctx.ellipse( 80 + Math.sin(t / 30), 100, 8, 8, 0, 0, 2 * Math.PI);
    ctx.ellipse(120 + Math.sin(t / 30), 100, 8, 8, 0, 0, 2 * Math.PI);
    ctx.fillStyle = 'skyblue';
    ctx.fill();
    
    t++;
    setTimeout(draw, 10);
 }

  draw();
}

HTMLについて

HTML (HyperText Markup Language)は、Webページを作成するためのマークアップ言語です。HTMLを使うことで、テキストや画像、音声、動画などのコンテンツをWebページ上に配置し、それらをリンクさせることができます。

HTMLは、タグ (tag) と呼ばれる特定の単語や文字列で構成される要素から成り立っています。タグは、以下のような形式で表現されます。

php
Copy code
<タグ名 属性="属性値">コンテンツ
例えば、以下のような

タグは、見出しを定義するためのものです。

css
Copy code

見出しのテキスト

また、以下のようにタグを使うことで、画像を表示することができます。

php
Copy code
画像の説明
さらに、HTMLは、CSSやJavaScriptなどの技術と組み合わせて、より複雑なWebページやアプリケーションを作成することができます。

HTMLは、Web開発において必要な基本的な技術であり、WebデザイナーやWeb開発者にとって重要なスキルとなっています。

HTMLの基礎

HTMLの基礎については以下の通りです。

HTMLの文書構造
HTML文書は基本的に以下のような構造を持ちます。
php
Copy code



ページのタイトル

見出し

文章の本文



はHTML5の文書タイプを指定するための宣言です。
はHTML文書全体を囲むタグで、その中にはとが含まれます。
は文書の情報を含むタグで、タイトルやスタイルシートなどが指定されます。
はHTML文書の本文を含むタグです。
HTMLタグ
HTML文書は、さまざまなHTMLタグを使って構成されています。タグは<と>で囲まれた文字列で、HTMLの要素を指定します。
例えば、

タグは見出しを表すために使用され、

タグは段落を表すために使用されます。

属性
HTMLタグには、属性を追加することができます。属性は、HTML要素の詳細を指定するために使用されます。
例えば、タグには、src属性を追加することで、表示する画像のファイルパスを指定することができます。

リンク
HTML文書では、リンクを作成することができます。リンクは、タグを使用して作成されます。
例えば、以下のように書くことで、Googleのウェブサイトにリンクを作成することができます。

php
Copy code
Google
画像の表示
HTML文書では、画像を表示することができます。画像の表示には、タグを使用します。
例えば、以下のように書くことで、”example.jpg”という画像を表示することができます。

php
Copy code
画像の説明
以上が、HTMLの基礎的な概念についての説明です。

HTML

HTML (Hypertext Markup Language) is a markup language used to create and structure content for the World Wide Web. It is the standard language for creating web pages and web applications.

HTML uses a system of tags and attributes to define the structure and content of a web page. Tags are used to enclose content, and attributes provide additional information about the content.

Some common HTML tags include:

: This tag is used to enclose the entire HTML document.
: This tag contains information about the document, such as the title and metadata.
: This tag contains the main content of the web page.

to

: These tags are used to define headings of various sizes.

: This tag is used to define paragraphs.
: This tag is used to create hyperlinks to other web pages or resources.
: This tag is used to embed images into the web page.
In addition to these tags, there are many other tags and attributes that can be used in HTML to create a wide variety of web content.

HTML is often used in conjunction with other web technologies, such as CSS (Cascading Style Sheets) for styling and layout, and JavaScript for interactivity and dynamic content.