<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ニコニコ動画風サイト</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
nav {
background-color: #555;
color: #fff;
display: flex;
justify-content: space-around;
padding: 10px 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
main {
display: flex;
margin: 20px;
}
aside {
width: 25%;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section {
width: 75%;
padding: 20px;
}
.video-player {
background-color: #000;
height: 400px;
margin-bottom: 20px;
position: relative;
}
.video-player video {
width: 100%;
height: 100%;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
.comments {
list-style: none;
padding: 0;
}
.comments li {
background-color: #fff;
margin-bottom: 10px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.comment-form {
display: flex;
margin-top: 20px;
}
.comment-form input {
flex: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.comment-form button {
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.thumbnail {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.thumbnail img {
width: 120px;
height: 90px;
margin-right: 10px;
}
.login-form, .register-form, .upload-form, .profile {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-form h2, .register-form h2, .upload-form h2, .profile h2 {
margin-top: 0;
}
.login-form input, .register-form input, .upload-form input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.login-form button, .register-form button, .upload-form button {
width: 100%;
padding: 10px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.search-form {
display: flex;
justify-content: center;
margin: 20px 0;
}
.search-form input {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.search-form button {
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.rating {
display: flex;
align-items: center;
margin-top: 10px;
}
.rating button {
border: none;
background: none;
cursor: pointer;
font-size: 1.2em;
margin-right: 10px;
}
.rating span {
margin-right: 20px;
}
</style>
</head>
<body>
<header>
<h1>ニコニコ動画風サイト</h1>
</header>
<nav>
<a href="index.html">ホーム</a>
<a href="ranking.html">ランキング</a>
<a href="categories.html">カテゴリー</a>
<a href="mypage.html">マイページ</a>
</nav>
<div class="search-form">
<input type="text" id="searchInput" placeholder="検索...">
<button onclick="search()">検索</button>
</div>
<main>
<aside>
<h2>おすすめ動画</h2>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail1.jpg" alt="動画1"></a>
<a href="video.html">動画1のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail2.jpg" alt="動画2"></a>
<a href="video.html">動画2のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail3.jpg" alt="動画3"></a>
<a href="video.html">動画3のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail4.jpg" alt="動画4"></a>
<a href="video.html">動画4のタイトル</a>
</div>
</aside>
<section>
<div class="video-player">
<video controls>
<source src="sample.mp4" type="video/mp4">
あなたのブラウザは動画タグに対応していません。
</video>
</div>
<h2>動画タイトル</h2>
<p>動画の説明文がここに入ります。</p>
<div class="rating">
<button onclick="like()">👍</button><span id="likeCount">0</span>
<button onclick="dislike()">👎</button><span id="dislikeCount">0</span>
</div>
<h3>コメント</h3>
<ul class="comments" id="comments">
<li><span class="timestamp">12:34</span> コメント1</li>
<li><span class="timestamp">12:35</span> コメント2</li>
<li><span class="timestamp">12:36</span> コメント3</li>
<li><span class="timestamp">12:37</span> コメント4</li>
</ul>
<div class="comment-form">
<input type="text" id="commentInput" placeholder="コメントを入力してください">
<button onclick="addComment()">コメントを投稿</button>
</div>
</section>
</main>
<footer>
</footer>
<!-- Register Form -->
<div class="register-form">
<h2>ユーザー登録</h2>
<input type="text" id="registerUsername" placeholder="ユーザー名">
<input type="password" id="registerPassword" placeholder="パスワード">
<button onclick="register()">登録</button>
</div>
<!-- Login Form -->
<div class="login-form">
<h2>ログイン</h2>
<input type="text" id="loginUsername" placeholder="ユーザー名">
<input type="password" id="loginPassword" placeholder="パスワード">
<button onclick="login()">ログイン</button>
</div>
<!-- Upload Form -->
<div class="upload-form">
<h2>動画アップロード</h2>
<input type="file" id="uploadVideo">
<input type="text" id="uploadTitle" placeholder="タイトル">
<button onclick="upload()">アップロード</button>
</div>
<!-- Profile Page -->
<div class="profile">
<h2>プロフィール</h2>
<p>ユーザー名: <span id="profileUsername"></span></p>
<p>登録日: <span id="profileDate"></span></p>
</div>
<script>
let likeCount = 0;
let dislikeCount = 0;
function addComment() {
var commentInput = document.getElementById('commentInput');
var commentText = commentInput.value.trim();
if (commentText !== "") {
var commentsList = document.getElementById('comments');
var newComment = document.createElement('li');
var timestamp = new Date().toLocaleTimeString();
newComment.innerHTML = '<span class="timestamp">' + timestamp + '</span> ' + commentText;
commentsList.appendChild(newComment);
commentInput.value = "";
}
}
function like() {
likeCount++;
document.getElementById('likeCount').innerText = likeCount;
}
function dislike() {
dislikeCount++;
document.getElementById('dislikeCount').innerText = dislikeCount;
}
function search() {
var searchInput = document.getElementById('searchInput').value.trim();
if (searchInput !== "") {
alert('検索結果: ' + searchInput);
}
}
function register() {
var username = document.getElementById('registerUsername').value.trim();
var password = document.getElementById('registerPassword').value.trim();
if (username !== "" && password !== "") {
alert('ユーザー登録が完了しました: ' + username);
localStorage.setItem('username', username);
localStorage.setItem('password', password);
document.getElementById('registerUsername').value = "";
document.getElementById('registerPassword').value = "";
}
}
function login() {
var username = document.getElementById('loginUsername').value.trim();
var password = document.getElementById('loginPassword').value.trim();
var storedUsername = localStorage.getItem('username');
var storedPassword = localStorage.getItem('password');
if (username === storedUsername && password === storedPassword) {
alert('ログイン成功');
document.getElementById('profileUsername').innerText = username;
document.getElementById('profileDate').innerText = new Date().toLocaleDateString();
document.getElementById('loginUsername').value = "";
document.getElementById('loginPassword').value = "";
} else {
alert('ユーザー名またはパスワードが間違っています');
}
}
function upload() {
var video = document.getElementById('uploadVideo').files[0];
var title = document.getElementById('uploadTitle').value.trim();
if (video && title !== "") {
alert('動画アップロードが完了しました: ' + title);
document.getElementById('uploadVideo').value = "";
document.getElementById('uploadTitle').value = "";
}
}
</script>
</body>
</html>
カテゴリー: HTML
CSS 画像を左右に振り分ける
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 Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
</body>
</html>style.css
@charset "utf-8";
article {
display: flex;
gap: 16px;
align-items: center;
}
article+article {
margin-top: 32px;
}
article:nth-child(even) {
flex-direction: row-reverse;
}
.text {
flex: 1;
}
h1 {
margin: 0;
font-size: 22px;
}HTMLCSS 画像付きの記事一覧を作る
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 Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。</p>
</div>
</article>
</body>
</html>style.css
@charset "utf-8";
article {
display: flex;
gap: 16px;
}
.text {
background: pink;
flex: 1;
}Social Networking Service
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Networking Service</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding: 20px;
}
.card {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center mb-4">Social Networking Service</h1>
<!-- ログインフォーム -->
<div id="loginForm" class="card w-50 mx-auto">
<div class="card-body">
<h2 class="card-title text-center mb-4">Login</h2>
<div class="form-group">
<input type="text" id="loginUsername" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" id="loginPassword" class="form-control" placeholder="Password">
</div>
<button onclick="login()" class="btn btn-primary btn-block">Login</button>
<button onclick="registerForm()" class="btn btn-secondary btn-block">Register</button>
</div>
</div>
<!-- 登録フォーム -->
<div id="registerForm" class="card w-50 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">Register</h2>
<div class="form-group">
<input type="text" id="registerName" class="form-control" placeholder="Full Name">
</div>
<div class="form-group">
<input type="text" id="registerUsername" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" id="registerPassword" class="form-control" placeholder="Password">
</div>
<button onclick="register()" class="btn btn-primary btn-block">Register</button>
<button onclick="loginForm()" class="btn btn-secondary btn-block">Back to Login</button>
</div>
</div>
<!-- プロフィール -->
<div id="profile" class="card w-50 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">Profile</h2>
<p><strong>Name:</strong> <span id="profileName"></span></p>
<p><strong>Username:</strong> <span id="profileUsername"></span></p>
<button onclick="logout()" class="btn btn-danger btn-block">Logout</button>
</div>
</div>
<!-- 投稿フォーム -->
<div id="postForm" class="card w-75 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">Create Post</h2>
<div class="form-group">
<textarea id="postContent" class="form-control" rows="3" placeholder="What's on your mind?"></textarea>
</div>
<button onclick="createPost()" class="btn btn-primary btn-block">Post</button>
</div>
</div>
<!-- 投稿一覧 -->
<div id="postList" class="w-75 mx-auto mt-4"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
let currentUser = null; // 現在のログインユーザー
let users = []; // ユーザーの配列
let posts = []; // 投稿の配列
function login() {
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
const user = users.find(u => u.username === username && u.password === password);
if (user) {
currentUser = user;
showProfile();
} else {
alert('Invalid username or password.');
}
}
function logout() {
currentUser = null;
hideAll();
document.getElementById('loginForm').style.display = 'block';
}
function registerForm() {
hideAll();
document.getElementById('registerForm').style.display = 'block';
}
function register() {
const name = document.getElementById('registerName').value;
const username = document.getElementById('registerUsername').value;
const password = document.getElementById('registerPassword').value;
users.push({ name, username, password });
alert('Registration successful! Please login.');
loginForm();
}
function loginForm() {
hideAll();
document.getElementById('loginForm').style.display = 'block';
}
function showProfile() {
hideAll();
document.getElementById('profile').style.display = 'block';
document.getElementById('profileName').textContent = currentUser.name;
document.getElementById('profileUsername').textContent = currentUser.username;
document.getElementById('postForm').style.display = 'block';
displayPosts();
}
function createPost() {
const postContent = document.getElementById('postContent').value;
if (postContent.trim() !== '') {
const post = {
id: Date.now(),
content: postContent,
author: currentUser.name,
authorUsername: currentUser.username,
likes: 0,
comments: []
};
posts.unshift(post); // 最新の投稿を先頭に追加
displayPosts();
document.getElementById('postContent').value = ''; // 投稿後、入力欄を空にする
}
}
function displayPosts() {
const postList = document.getElementById('postList');
postList.innerHTML = '';
posts.forEach(post => {
const postElement = document.createElement('div');
postElement.innerHTML = `
<div class="card mb-3">
<div class="card-body">
<p class="card-text">${post.content}</p>
<small class="text-muted">Posted by ${post.author} (@${post.authorUsername}) at ${new Date(post.id).toLocaleString()}</small><br>
<button onclick="likePost(${post.id})" class="btn btn-primary btn-sm mt-2">Like (${post.likes})</button>
<button onclick="showComments(${post.id})" class="btn btn-secondary btn-sm mt-2">Comments</button>
</div>
</div>
`;
postList.appendChild(postElement);
});
}
function likePost(postId) {
const post = posts.find(p => p.id === postId);
post.likes++;
displayPosts();
}
function showComments(postId) {
const post = posts.find(p => p.id === postId);
const comments = prompt('Enter your comment:');
if (comments !== null && comments.trim() !== '') {
post.comments.push({ author: currentUser.name, content: comments });
displayPosts();
}
}
function hideAll() {
document.getElementById('loginForm').style.display = 'none';
document.getElementById('registerForm').style.display = 'none';
document.getElementById('profile').style.display = 'none';
document.getElementById('postForm').style.display = 'none';
}
users.push({ name: 'User One', username: 'user1', password: 'password1' });
users.push({ name: 'User Two', username: 'user2', password: 'password2' });
hideAll();
document.getElementById('loginForm').style.display = 'block';
</script>
</body>
</html>
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>
今回はテキストデータを保存できるようにしました
検索エンジン「Voogle」
import requests
from flask import Flask, request, jsonify
app = Flask(__name__)
class SearchEngine:
def __init__(self, documents):
self.documents = documents
def search_local(self, query):
results = []
for doc in self.documents:
if query.lower() in doc["text"].lower():
results.append(doc)
return results
def search_wikipedia(self, query, lang='ja'):
base_url = f"https://{lang}.wikipedia.org/w/api.php"
params = {
'action': 'query',
'list': 'search',
'srsearch': query,
'format': 'json'
}
response = requests.get(base_url, params=params)
if response.status_code == 200:
search_results = response.json().get('query', {}).get('search', [])
return [{'id': result['pageid'], 'text': result['snippet']} for result in search_results]
else:
return []
# サンプルドキュメントデータ
documents = [
{"id": 1, "text": "Pythonは汎用の高水準言語です。"},
{"id": 2, "text": "検索エンジンは情報を検索するためのツールです。"},
{"id": 3, "text": "人工知能はコンピュータによる知的な振る舞いを実現する技術です。"},
{"id": 4, "text": "Web開発では、HTML、CSS、JavaScriptなどの技術が使われます。"},
{"id": 5, "text": "データサイエンティストはデータから有益な情報を引き出す専門家です。"}
]
# SearchEngineインスタンスの作成
search_engine = SearchEngine(documents)
@app.route("/", methods=["GET", "POST"])
def search():
# 以前の関数の内容は変更なし
if request.method == "POST":
query = request.form["query"]
local_results = search_engine.search_local(query)
wiki_results = search_engine.search_wikipedia(query)
all_results = local_results + wiki_results
if not all_results:
return "検索結果はありません。"
else:
result_text = "<br>".join([f"<div><strong>ID:</strong> {result['id']}, <strong>Text:</strong> {result['text']}</div>" for result in all_results])
return f"""
<!DOCTYPE html>
<html>
<head>
<title>検索エンジン</title>
<style>
body {{
font-family: Arial, sans-serif;
margin: 0 auto;
max-width: 800px;
padding: 20px;
}}
h1 {{
color: #333;
}}
form {{
margin-bottom: 20px;
}}
input[type="text"] {{
margin-right: 10px;
padding: 10px;
width: calc(100% - 122px);
}}
input[type="submit"] {{
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}}
input[type="submit"]:hover {{
background-color: #45a049;
}}
div {{
margin-bottom: 10px;
padding: 10px;
background-color: #f2f2f2;
border-left: 4px solid #4CAF50;
}}
</style>
</head>
<body>
<h1>検索エンジン</h1>
<form method="POST">
<label for="query">検索キーワード:</label>
<input type="text" name="query" id="query" required>
<input type="submit" value="検索">
</form>
{result_text}
</body>
</html>
"""
return """
<!DOCTYPE html>
<html>
<head>
<title>検索エンジン</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0 auto;
max-width: 800px;
padding: 20px;
}
h1 {
color: #333;
}
form {
margin-bottom: 20px;
}
input[type="text"] {
margin-right: 10px;
padding: 10px;
width: calc(100% - 122px);
}
input[type="submit"] {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>検索エンジン</h1>
<form method="POST">
<label for="query">検索キーワード:</label>
<input type="text" name="query" id="query" required>
<input type="submit" value="検索">
</form>
</body>
</html>
"""
if __name__ == "__main__":
app.run(debug=True)
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の基礎的な概念についての説明です。