Creating a Harry Potter-inspired “Tom Riddle’s Diary”

Lets creating a Harry Potter-inspired “Tom Riddle’s Diary” AI interface involves several components. We’ll create a simple chat interface where users can type messages, and our “diary” will respond using a basic AI powered by an API like OpenAI’s GPT-3 or a similar language model.

Overview of the Implementation

HTML Structure: A simple chat interface.
CSS Styling: Basic styling for the chat interface.
JavaScript: Handling user input, communicating with the AI API, and displaying responses.

Step 1: HTML Structure

Create an index.html file with the following content:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tom Riddle's Diary AI</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="chat-container">
        <div class="chat-box" id="chat-box"></div>
        <input type="text" id="user-input" placeholder="Write something...">
        <button id="send-button">Send</button>
    </div>

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

Step 2: CSS Styling

Create a styles.css file with the following content for basic styling:

css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.chat-container {
    background-color: #fff;
    width: 400px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

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

.chat-box .message {
    margin: 10px 0;
}

.chat-box .user {
    text-align: right;
    color: #007bff;
}

.chat-box .diary {
    text-align: left;
    color: #555;
}

#user-input {
    width: calc(100% - 70px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 10px;
}

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

#send-button:hover {
    background-color: #0056b3;
}

Step 3: JavaScript

Create a script.js file to handle user input, communicate with the AI API, and display responses:

javascript

document.getElementById('send-button').addEventListener('click', sendMessage);
document.getElementById('user-input').addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

async function sendMessage() {
    const inputBox = document.getElementById('user-input');
    const message = inputBox.value.trim();
    if (message === '') return;

    displayMessage(message, 'user');
    inputBox.value = '';

    const response = await getAIResponse(message);
    displayMessage(response, 'diary');
}

function displayMessage(message, sender) {
    const chatBox = document.getElementById('chat-box');
    const messageElement = document.createElement('div');
    messageElement.className = 'message ' + sender;
    messageElement.textContent = message;
    chatBox.appendChild(messageElement);
    chatBox.scrollTop = chatBox.scrollHeight;
}

async function getAIResponse(message) {
    // Replace with your AI API endpoint and key
    const apiKey = 'YOUR_API_KEY';
    const apiUrl = 'https://api.openai.com/v1/engines/davinci-codex/completions';

    const response = await fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            prompt: `User: ${message}\nDiary:`,
            max_tokens: 150,
            temperature: 0.7,
            stop: ['\nUser:', '\nDiary:']
        })
    });

    const data = await response.json();
    return data.choices[0].text.trim();
}

Explanation:

HTML Structure:
- A container (chat-container) holds the chat messages and input field.
- chat-box displays the chat messages.
- An input field (user-input) for user messages and a send button (send-button).
CSS Styling:
- Basic styling to make the chat interface look clean and centered.
- Differentiates user messages from diary responses with different text alignments and colors.
JavaScript:
- sendMessage handles sending messages when the button is clicked or Enter key is pressed.
- displayMessage adds a message to the chat box.
- getAIResponse communicates with the AI API to get a response. Replace the apiKey and apiUrl with your actual API key and endpoint.

Notes:

AI API: You’ll need an API key from a service like OpenAI’s GPT-3. Replace 'YOUR_API_KEY' with your actual API key.
Security: For a real-world application, you should handle the API key securely, possibly using a backend server to make API calls to avoid exposing the key in client-side code.
Improvements: Add features like message history, better error handling, and more sophisticated AI prompts for a richer interaction.

With these components, you have a basic yet advanced implementation of an interactive “Tom Riddle’s Diary” AI using client-side JavaScript.

Tony's CodeForge Blog