index.html
main.js
‘use strict’; { document.addEventListener(‘keydown’, (e) => { document.querySelector(‘p’).textContent = e.key; }); }index.html
main.js
‘use strict’; { document.addEventListener(‘keydown’, (e) => { document.querySelector(‘p’).textContent = e.key; }); }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>
今回はテキストデータを保存できるようにしました
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;
});
}
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);
}
});
});
}
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);
});
}
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 = '';
});
}
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();
}
});
}
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';
});
}
<!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!';
});
});
}
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()