python chatGPT2-AI

chatGPT-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;
        }

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

        main {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .form-section, .response-section, .wikipedia-section {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .prompt-form {
            max-width: 100%;
        }

        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;
        }

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

        .tweet-link {
            display: block;
            margin-top: 10px;
            text-align: center;
        }

        footer {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>

    <header>
        <h1>Generate Text</h1>
    </header>

    <main>
        <section class="form-section">
            <form action="/generate" method="POST" class="prompt-form">
                <label for="prompt">Enter your prompt:</label><br>
                <input type="text" id="prompt" name="prompt" placeholder="Enter your prompt..."><br><br>
                <button type="submit">Generate</button>
            </form>
        </section>

        <!-- 生成されたテキストを表示 -->
        {% if generated_text %}
        <section class="response-section">
            <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">Tweet</a>
            </div>
        </section>
        {% endif %}

        <!-- Wikipediaからの関連情報を表示 -->
        {% if wikipedia_text %}
        <section class="wikipedia-section">
            <div class="wikipedia-info">
                <h2>Wikipedia Info:</h2>
                <p>{{ wikipedia_text }}</p>
            </div>
        </section>
        {% endif %}

        <!-- 保存ボタン -->
        <button id="saveButton">Save Generated Text</button>
    </main>

    <footer>
        <p>© 2024 Generate Text App</p>
    </footer>

    <script>
        // 保存ボタンがクリックされたときの処理
        document.getElementById('saveButton').addEventListener('click', function() {
            // 生成されたテキストを取得
            var generatedText = document.querySelector('.generated-text').innerText;
            // テキストをダウンロード用にBlobに変換
            var blob = new Blob([generatedText], { type: 'text/plain' });
            // BlobをURLに変換
            var url = window.URL.createObjectURL(blob);
            // ダウンロード用のリンクを作成してクリック
            var a = document.createElement('a');
            a.href = url;
            a.download = 'generated_text.txt';
            document.body.appendChild(a);
            a.click();
            // 不要なURLを解放
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        });
    </script>

</body>
</html>

今回はテキストデータを保存できるようにしました

Javascript Input

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <input type="text">
  <p></p>
  
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  // input → text, textarea, select
  // change → radio, checkbox
  document.querySelector('input').addEventListener('input', () => {
    const pElement = document.querySelector('p');
    const inputElement = document.querySelector('input');
    // pElement.textContent = inputElement.value;
    pElement.textContent = inputElement.value.length;
  });
}

Javascirpt ラジオボタン

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <input type="radio" name="color" value="red"> Red
  <input type="radio" name="color" value="green"> Green
  <input type="radio" name="color" value="blue"> Blue
  <button>OK</button>

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

main.js

'use strict';

{
  document.querySelector('button').addEventListener('click', () => {
    document.querySelectorAll('input').forEach((radio) => {
      if (radio.checked === true) {
        alert(radio.value);
      }
    });
  });
}

Javascirpt ドロップダウンリストの値にアクセス

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <select>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>
  <button>OK</button>

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

main.js

'use strict';

{
  document.querySelector('button').addEventListener('click', () => {
    alert(document.querySelector('select').value);
  });
}

Javascirpt フォーム部品の値にアクセス

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <!-- <input type="text"> -->
  <textarea></textarea>
  <button>OK</button>

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

main.js

'use strict';

{
  document.querySelector('button').addEventListener('click', () => {
    // alert(document.querySelector('input').value);
    // alert(document.querySelector('textarea').value);
    document.querySelector('textarea').value = '';
  });
}

Javascript 要素の追加削除

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <ul>
    <li class="target">Taro</li>
    <li id="second">Jiro</li>
    <li class="target">Saburo</li>
  </ul>
  <button>OK</button>

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

main.js

'use strict';

{
  document.querySelector('button').addEventListener('click', () => {
    const liElement = document.createElement('li');
    liElement.textContent = 'Hanako';
    // document.querySelector('ul').appendChild(liElement);
    // document.querySelector('ul').insertBefore(
    //   liElement, 
    //   document.querySelector('#second')
    // );
    if (confirm('Sure?') === true) {
      document.querySelector('#second').remove();
    }
  });
}

Javascirpt createElement

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <ul>
    <li class="target">Taro</li>
    <li id="second">Jiro</li>
    <li class="target">Saburo</li>
  </ul>
  <button>OK</button>

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

main.js

'use strict';

{
  document.querySelector('button').addEventListener('click', () => {
    const liElement = document.createElement('li');
    liElement.textContent = 'Hanako';
  });
}

Javascript DOM セレクター

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <ul>
    <li>Taro</li>
    <li>Jiro</li>
    <li>Saburo</li>
  </ul>
  <button>OK</button>

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

main.js

'use strict';

{
  document.querySelector('button').addEventListener('click', () => {
    // document.querySelector('li').textContent = 'Changed!';
    // document.querySelectorAll('li')[0].textContent = 'Changed!';
    // document.querySelectorAll('li')[1].textContent = 'Changed!';
    // document.querySelectorAll('li')[2].textContent = 'Changed!';
    document.querySelectorAll('li').forEach((li) => {
      li.textContent = 'Changed!';
    });
  });
}

python WEBブラウザー

import tkinter as tk
from tkinter import ttk, messagebox
import webbrowser
import os

class WebBrowser(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Web Browser")
        self.geometry("800x600")

        self.notebook = ttk.Notebook(self)
        self.notebook.pack(fill="both", expand=True)

        self.tabs = []

        self.add_new_tab()

    def add_new_tab(self):
        tab = ttk.Frame(self.notebook)
        self.notebook.add(tab, text="New Tab")

        url_entry = ttk.Entry(tab, width=70)
        url_entry.grid(row=0, column=1, padx=5, pady=5, sticky="ew")
        url_entry.bind("<Return>", lambda event: self.open_webpage(url_entry.get()))

        go_button = ttk.Button(tab, text="Go", command=lambda: self.open_webpage(url_entry.get()))
        go_button.grid(row=0, column=2, padx=5, pady=5)

        back_button = ttk.Button(tab, text="Back", command=lambda: self.back(tab))
        back_button.grid(row=0, column=0, padx=5, pady=5)

        forward_button = ttk.Button(tab, text="Forward", command=lambda: self.forward(tab))
        forward_button.grid(row=0, column=3, padx=5, pady=5)

        close_button = ttk.Button(tab, text="X", command=lambda: self.close_tab(tab))
        close_button.grid(row=0, column=4, padx=5, pady=5)

        progress_bar = ttk.Progressbar(tab, orient="horizontal", mode="indeterminate")
        progress_bar.grid(row=1, column=1, columnspan=2, sticky="ew")

        web_browser = ttk.Frame(tab)
        web_browser.grid(row=2, column=0, columnspan=5, padx=5, pady=5, sticky="nsew")

        self.tabs.append({
            "tab": tab,
            "url_entry": url_entry,
            "go_button": go_button,
            "back_button": back_button,
            "forward_button": forward_button,
            "close_button": close_button,
            "progress_bar": progress_bar,
            "web_browser": web_browser,
            "browser": webbrowser.get(),
            "current_page": None
        })

    def open_webpage(self, url):
        if not url.startswith("http://") and not url.startswith("https://"):
            url = "http://" + url

        tab = self.notebook.select()
        tab_index = self.notebook.index(tab)
        tab_info = self.tabs[tab_index]

        tab_info["browser"].open_new(url)
        tab_info["current_page"] = url

    def back(self, tab):
        tab_index = self.notebook.index(tab)
        tab_info = self.tabs[tab_index]
        tab_info["browser"].back()

    def forward(self, tab):
        tab_index = self.notebook.index(tab)
        tab_info = self.tabs[tab_index]
        tab_info["browser"].forward()

    def close_tab(self, tab):
        tab_index = self.notebook.index(tab)
        self.notebook.forget(tab_index)
        del self.tabs[tab_index]

if __name__ == "__main__":
    app = WebBrowser()
    app.mainloop()