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()

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>

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>

Slack風チャットボットサイト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slack風チャットボット</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .chat-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .chat-window {
            width: 400px;
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
        }

        .chat-messages {
            height: 300px;
            overflow-y: auto;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }

        #message-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-window">
            <div class="chat-messages" id="chat-messages">
                <!-- チャットメッセージが表示される部分 -->
            </div>
            <input type="text" id="message-input" placeholder="メッセージを入力してください...">
            <button onclick="sendMessage()">送信</button>
        </div>
    </div>

    <script>
        function sendMessage() {
            var messageInput = document.getElementById('message-input');
            var message = messageInput.value.trim();

            if (message !== '') {
                var chatMessages = document.getElementById('chat-messages');
                var messageElement = document.createElement('div');
                messageElement.textContent = message;
                chatMessages.appendChild(messageElement);
                messageInput.value = '';

                // メッセージをバックエンドに送信
                fetch('/send_message', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ message: message })
                });
            }
        }
    </script>
</body>
</html>

CSS align-self、autoキーワード

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>
  <div class="container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
  </div>
</body>

</html>

style.css

@charset "utf-8";

.container {
  border: 8px solid blue;
  display: flex;
  height: 240px;
}

.item-1 {
  width: 80px;
  height: 80px;
  background-color: pink;
  align-self: center;
}

.item-2 {
  width: 80px;
  height: 80px;
  background-color: skyblue;
  margin-left: auto;
}

.item-3 {
  width: 80px;
  height: 80px;
  background-color: orange;
}

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>
  <div class="container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
  </div>
  <div class="container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
  </div>
</body>

</html>

style.css

@charset "utf-8";

.container {
  border: 8px solid blue;
  /* display: flex; */
  display: inline-flex;
  width: 280px;
}

.item-1 {
  width: 80px;
  height: 80px;
  background-color: pink;
}

.item-2 {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.item-3 {
  width: 80px;
  height: 80px;
  background-color: orange;
}

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>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const string = prompt('Name?');
  //if(string.toLowerCase() === 'taro'){
  if(string.toUpperCase().trim() === 'TARO'){
    console.log('Corrent!');
  }else{
    console.log('Wrong!');
  }
}

ruby メソッドをオーバーライド

class Score
  def initialize(subject, score)
    @subject = subject
    @score = score
  end

  def get_info
    "#{@subject}/#{@score} -> #{get_result}"
  end

  private

  def get_result
    @score >= 80 ? "Pass" : "Fail"
  end
end

class MathScore < Score
  def initialize(score)
    super("Math", score)
  end

  private 

  # ovierride
  def get_result
  @score >= 50 ? "Pass" : "Fail"
  end
end

class EnglishScore < Score
  def initialize(score)
    super("English", score)
  end
end

class User
  def initialize(name, score)
    @name = name
    @score = score
  end

  def get_info
    "Name: #{@name}, Score: #{@score.get_info}"
  end
end

user1 = User.new("Taro", MathScore.new(70))
user2 = User.new("Jiro", EnglishScore.new(90))
puts user1.get_info
puts user2.get_info

ruby 子クラス

class Score
  def initialize(subject, score)
    @subject = subject
    @score = score
  end

  def get_info
    "#{@subject}/#{@score} -> #{get_result}"
  end

  private

  def get_result
    @score >=80 ? "Pass" : "Fail"
  end
end

class MathScore < Score
  def initialize(score)
  super("Math", score)
  end
end

class EnglishScore < Score
 def initialize(score)
  super("Math", score)
  end
end

class User
  def initialize(name, score)
    @name = name
    @score = score
  end

  def get_info
    "Name: #{@name}, Score: #{@score.get_info}"
  end
end

user1 = User.new("Taro", MathScore.new(70))
user2 = User.new("Jiro", EnglishScore.new(90))
puts user1.get_info
puts user2.get_info