GPT-2 ChatBot

import nltk
from transformers import pipeline
from sklearn.feature_extraction.text import TfidfVectorizer
from sklearn.linear_model import LogisticRegression
import numpy as np
import spacy

# nltkのセットアップ（初回のみ）
nltk.download('punkt')

# spaCyのセットアップ
nlp = spacy.load("en_core_web_sm")

# サンプルデータ（インテントとそのサンプル文）
training_sentences = [
    "Hello", "Hi", "Hey", "Good morning", "Good evening",
    "How are you?", "What's up?", "How's it going?",
    "Bye", "Goodbye", "See you later", "Take care",
    "Thank you", "Thanks", "I appreciate it",
    "What's your name?", "Who are you?",
    "What can you do?", "Tell me a joke", "Make me laugh",
    "What's the weather like?", "How's the weather?",
    "Book a flight", "I need to book a flight", "Can you book a flight for me?"
]

intents = [
    "greeting", "greeting", "greeting", "greeting", "greeting",
    "how_are_you", "how_are_you", "how_are_you",
    "goodbye", "goodbye", "goodbye", "goodbye",
    "thanks", "thanks", "thanks",
    "name", "name",
    "capabilities", "joke", "joke",
    "weather", "weather",
    "book_flight", "book_flight", "book_flight"
]

# 特徴抽出器と分類器のセットアップ
vectorizer = TfidfVectorizer()
X = vectorizer.fit_transform(training_sentences)
classifier = LogisticRegression()
classifier.fit(X, intents)

# GPT-2 を使用したテキスト生成パイプラインの作成
chatbot = pipeline("text-generation", model="gpt2")

# インテントに基づく応答
responses = {
    "greeting": ["Hello! How can I help you?", "Hi there! What can I do for you?"],
    "how_are_you": ["I'm just a bot, but I'm here to help you!", "I'm fine, thank you! How can I assist you today?"],
    "goodbye": ["Goodbye! Have a great day!", "See you later!"],
    "thanks": ["You're welcome!", "No problem!"],
    "name": ["I am your friendly chatbot.", "I'm an AI created to assist you."],
    "capabilities": ["I can chat with you and help answer your questions!", "I'm here to assist you with various tasks."],
    "joke": ["Why did the scarecrow win an award? Because he was outstanding in his field!"],
    "weather": ["The weather is nice today!", "It's a bit cloudy, but still good."],
    "book_flight": ["Sure, I can help you with that. Where would you like to go?"]
}

# 未知のインテントに対するエラーレスポンス
default_responses = ["I'm not sure I understand. Can you please rephrase?", "Sorry, I don't have an answer for that."]

# インテント認識
def get_intent(user_input):
    X_test = vectorizer.transform([user_input])
    intent = classifier.predict(X_test)[0]
    return intent

# エンティティ認識
def get_entities(user_input):
    doc = nlp(user_input)
    entities = {ent.label_: ent.text for ent in doc.ents}
    return entities

# 応答生成
def get_response(user_input):
    intent = get_intent(user_input)
    entities = get_entities(user_input)
    
    if intent in responses:
        response = np.random.choice(responses[intent])
        if intent == "book_flight" and "GPE" in entities:
            response = f"Sure, I can help you book a flight to {entities['GPE']}. When would you like to travel?"
        return response
    else:
        response = chatbot(user_input, max_length=50, num_return_sequences=1)
        return response[0]['generated_text']

# メイン関数
def main():
    print("Chatbot: Hello! How can I help you today? (Type 'exit' to quit)")
    
    while True:
        user_input = input("You: ")
        if user_input.lower() == 'exit':
            print("Chatbot: Goodbye!")
            break
        response = get_response(user_input)
        print(f"Chatbot: {response}")

if __name__ == "__main__":
    main()

CSS transition-delay

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 Animation</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box"></div>
</body>

</html>

style.css

@charset "utf-8";

.box {
    width: 80px;
    height: 80px;
    background: pink;
    transition-property: transform;
    transition-duration: 500ms;
    transition-delay: 1s;
}

.box:hover {
    transform: translateX(100px);
}

オリジナル小説とAI小説の違い

オリジナル小説とAI小説の違いは、主に創作過程、創造性、個性、そして感情の表現にあります。以下にそれぞれの特徴を示します。

オリジナル小説
創作過程:

人間の著者による執筆: オリジナル小説は、人間の著者が自身の経験、感情、想像力を基に執筆します。
個人的な体験と視点: 著者の人生経験や独自の視点が反映され、作品に独自の色彩を与えます。
編集と修正: 人間の著者は、執筆後に編集や修正を行い、作品の質を高めます。
創造性と個性:

独自のスタイル: 各著者の文体や語彙の選択に個性が現れます。
新規性とオリジナリティ: 著者が新しい物語やテーマを創造することが可能です。
感情の表現:

深い感情表現: 著者が自身の感情や人間関係の複雑さを深く描写できます。
AI小説
創作過程:

アルゴリズムとデータ: AI小説は、大量のデータセット（既存の小説、記事など）を学習したアルゴリズムによって生成されます。
自動生成: 特定のテーマやスタイルに基づいて自動的にテキストを生成します。
創造性と個性:

データに依存: AIの創造性は、学習したデータセットに依存しており、完全に新しいアイデアを生み出すのは難しいです。
一定のスタイル: AIの生成する文体や語彙は、学習データの範囲内であるため、個性が限定的です。
感情の表現:

感情の表現が浅い: AIは感情を体験することができないため、感情の描写が表面的になる傾向があります。
具体的な違いの例
オリジナル小説では、キャラクターの内面描写や複雑な人間関係がリアルに描かれます。一方、AI小説では、こうした深い描写が乏しく、プロットが単純化されることが多いです。
オリジナル小説では、著者の哲学や思想が作品に反映されることが多く、読者に深い影響を与えることがあります。AI小説では、そうした深い哲学的要素が欠けることが一般的です。
結論
オリジナル小説とAI小説の最大の違いは、人間の感情と経験の深さ、創造性の独自性にあります。AIは大量のデータを基に迅速に文章を生成することができますが、人間の著者が持つ感情や経験、独自の視点を完全に再現することは難しいです。

java 数当てゲーム

import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        boolean playAgain = true;
        int highScore = 0;

        System.out.println("数当てゲームへようこそ！");

        while (playAgain) {
            int minRange = 1;
            int maxRange = 100;
            int randomNumber = (int) (Math.random() * (maxRange - minRange + 1)) + minRange;
            int attempts = 0;

            System.out.println("1から100までの数を当ててください！");

            while (true) {
                System.out.print("予想した数字を入力してください: ");
                if (!scanner.hasNextInt()) {
                    System.out.println("無効な入力です。数値を入力してください。");
                    scanner.next(); // 不正な入力をクリア
                    continue;
                }
                int guessedNumber = scanner.nextInt();
                attempts++;

                if (guessedNumber < randomNumber) {
                    System.out.println("もっと大きい数字です。");
                } else if (guessedNumber > randomNumber) {
                    System.out.println("もっと小さい数字です。");
                } else {
                    System.out.println("おめでとうございます！正解です！");
                    System.out.println("あなたの試行回数: " + attempts);
                    if (attempts < highScore || highScore == 0) {
                        highScore = attempts;
                        System.out.println("新しいハイスコア！試行回数: " + highScore);
                    } else {
                        System.out.println("ハイスコアは" + highScore + "回です。");
                    }
                    break;
                }
            }

            System.out.print("もう一度プレイしますか？ (y/n): ");
            String playChoice = scanner.next();
            playAgain = playChoice.equalsIgnoreCase("y");
        }

        System.out.println("ゲームを終了します。");
        System.out.println("最終ハイスコア: " + highScore);
        scanner.close();
    }
}

ECサイトGamazon

http://tyosuke20xx.com/Gamazon.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gamazon</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color: #131921;
            color: white;
        }
        .navbar h1 {
            font-size: 1.5rem;
        }
        .navbar nav ul {
            list-style: none;
            display: flex;
        }
        .navbar nav ul li {
            padding: 0 10px;
        }
        .navbar nav ul li a {
            text-decoration: none;
            color: white;
        }
        .product {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
            width: 200px;
            float: left;
        }
        .product img {
            width: 100%;
            height: auto;
        }
        .featured-products .carousel {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
        }
        .featured-products .carousel div {
            scroll-snap-align: start;
            flex: 0 0 90%;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <header>
        <div class="navbar">
            <h1>My Gmazon Store</h1>
            <input type="text" placeholder="商品を検索" id="search-box">
            <button onclick="searchProduct()">検索</button>
            <nav>
                <ul>
                    <li><a href="#">ホーム</a></li>
                    <li><a href="#">商品カテゴリ</a></li>
                    <li><a href="#">セール</a></li>
                    <li><a href="#">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="featured-products">
            <h2>特選商品</h2>
            <div class="carousel">
                <!-- カルーセル用のJavaScriptで動的に商品を挿入 -->
            </div>
        </section>

        <section class="product-list">
            <h2>商品リスト</h2>
            <div class="products">
                <!-- 商品リスト -->
            </div>
        </section>

        <section class="customer-reviews">
            <h2>ユーザーレビュー</h2>
            <div class="reviews">
                <!-- レビュー -->
            </div>
        </section>
    </main>

    <footer>
        <p>© 2024 My Gmazon Store. All rights reserved.</p>
    </footer>

    <script>
        function searchProduct() {
            const searchInput = document.getElementById('search-box').value;
            alert('検索した商品: ' + searchInput);
        }

        // 他にもカルーセルの動きやユーザーレビューを動的に表示する関数を追加
    </script>
</body>
</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 Media Queries</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
</body>
</html>

style.css

@charset "utf-8";

body {
    background: pink;
}

/* width >= 600px */
@media (min-width: 600px) {
    body {
        background: skyblue;
    }
}

@media (min-width: 800px) {
    body {
        background: orange;
    }
}

動画共有サイト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動画共有サイト</title>
    <style>
        /* スタイルは省略 */
    </style>
</head>
<body>
    <header>
        <h1>動画共有サイト</h1>
    </header>
    <main>
        <section id="video-container">
            <!-- 動画を表示 -->
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Qkls4DCX_9I" frameborder="0" allowfullscreen></iframe>
        </section>
        <section id="comments-container">
            <!-- コメントを表示 -->
        </section>
        <section id="comment-form-container">
            <!-- コメントを投稿するフォーム -->
            <form id="comment-form">
                <textarea id="comment-input" rows="3" placeholder="コメントを入力してください"></textarea>
                <button type="submit">コメントを投稿</button>
            </form>
        </section>
        <section id="categories">
            <!-- カテゴリ一覧 -->
            <h2>カテゴリ</h2>
            <ul>
                <li><a href="#">音楽</a></li>
                <li><a href="#">スポーツ</a></li>
                <li><a href="#">ゲーム</a></li>
                <li><a href="#">ニュース</a></li>
            </ul>
        </section>
    </main>
    <footer>
        <!-- お気に入りボタン -->
        <button id="favorite-button">お気に入り</button>
        <!-- 検索フォーム -->
        <input type="text" id="search-input" placeholder="動画を検索">
        <button id="search-button">検索</button>
    </footer>
    <script>
        // コメントを追加する関数
        function addComment(comment) {
            var commentsContainer = document.getElementById('comments-container');
            var commentElement = document.createElement('div');
            commentElement.textContent = comment;
            commentsContainer.appendChild(commentElement);
        }

        // フォームの送信イベントを処理する
        document.getElementById('comment-form').addEventListener('submit', function(event) {
            event.preventDefault(); // フォームのデフォルトの動作を停止

            var commentInput = document.getElementById('comment-input');
            var commentText = commentInput.value.trim(); // 入力されたコメントを取得

            if (commentText !== '') {
                addComment(commentText); // コメントを追加
                commentInput.value = ''; // 入力欄をクリア
            }
        });

        // お気に入りボタンのクリックイベントを処理する
        document.getElementById('favorite-button').addEventListener('click', function() {
            alert('動画をお気に入りに追加しました！');
        });

        // 検索ボタンのクリックイベントを処理する
        document.getElementById('search-button').addEventListener('click', function() {
            var searchInput = document.getElementById('search-input').value.trim();
            alert('「' + searchInput + '」で検索しました！');
        });
    </script>
</body>
</html>

コードギアスR3の企画書

企画書：『コードギアス R3：反逆の遺産』
制作会社：サンライズ

企画意図：
『コードギアス 反逆のルルーシュ』の成功に続き、シリーズの新たな章を展開し、ファンに新しい視点と物語を提供する。

物語の概要：
物語は、『コードギアス 反逆のルルーシュ R2』の終わりから数年後を描く。世界は表向きの平和を享受しているが、新たな力「シャドウギアス」が登場し、再び世界は混乱に陥る。主人公はルルーシュの隠された子孫であり、彼が持つ未知のギアス能力により、新たな戦いに挑む。

登場キャラクター：

主人公：アリアス・ヴィ・ブリタニア – ルルーシュの秘密の血を引く若者。彼には未知のギアス能力が宿る。
ヒロイン：メイ・チャン – 独立運動のリーダーであり、アリアスの最初の同盟者。
アンタゴニスト：シリウス・ゾルディック – シャドウギアスの能力者で、新世界秩序を築こうと企む。
メインテーマ：

権力と抵抗 – 権力の座にある者と、それに抵抗する者との永遠の戦い。
遺産と運命 – ルルーシュの遺産がどのように次世代に影響を与えるか。
秘密と発見 – 主人公の真の起源と彼の力の秘密が明らかになるプロセス。
予定話数： 25話

ターゲットオーディエンス：
既存のファンはもちろん、新しい視聴者も引き付けるために、若者から大人まで幅広く。

プロモーション戦略：

アニメ関連イベントでのプレミア上映会
SNSを活用したティザーキャンペーン
コラボグッズの販売
特別編集版DVDのリリース

Pinterest風サイト

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

        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
            margin: 0 auto;
            max-width: 1200px;
        }

        .card {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card img {
            width: 100%;
            display: block;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .card-content {
            padding: 15px;
        }

        .card h2 {
            font-size: 18px;
            margin: 10px 0;
            color: #333;
        }

        .card p {
            font-size: 14px;
            color: #666;
            margin-top: 0;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
        }

        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
        }

        .modal img {
            max-width: 100%;
            display: block;
            margin: 0 auto;
        }

        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Pintrest風サイト</h1>
    </header>

    <main>
        <div class="container">
            <div class="card" onclick="openModal('https://via.placeholder.com/800x600', 'Beautiful Sunset', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')">
                <img src="https://via.placeholder.com/400x250" alt="Image 1">
                <div class="card-content">
                    <h2>Beautiful Sunset</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="card" onclick="openModal('https://via.placeholder.com/800x600', 'Cute Kittens', 'Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.')">
                <img src="https://via.placeholder.com/400x300" alt="Image 2">
                <div class="card-content">
                    <h2>Cute Kittens</h2>
                    <p>Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
                </div>
            </div>
            <!-- More cards -->
        </div>
    </main>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <img src="" alt="Modal Image" id="modalImage">
            <div id="caption"></div>
        </div>
    </div>

    <footer>
        <p>&copy; 2024 Pintrest風サイト</p>
    </footer>

    <script>
        function openModal(imageSrc, title, description) {
            document.getElementById("modalImage").src = imageSrc;
            document.getElementById("caption").innerHTML = "<h2>" + title + "</h2><p>" + description + "</p>";
            document.getElementById("myModal").style.display = "block";
        }

        function closeModal() {
            document.getElementById("myModal").style.display = "none";
        }
    </script>
</body>
</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;
}