ZoneTwelve/output.md Secret

## output.md

      
    Raw
  

              output.md
            
          
    以下是依據您所提供的要求所編寫的使用者對談記錄顯示網頁之HTML、JavaScript及CSS程式碼。請注意，此範例只包含基本結構和功能，若您需要更複雜的設計或額外的功能，可再行修改。
HTML（index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>User vs AI Request Response Display</title>
</head>
<body>
    <div class="container">
        <h1>User vs AI Request Response Display</h1>
        <div class="sidebar">
            <textarea id="userJson" placeholder="輸入使用者JSON資料..."></textarea>
        </div>
        <div class="main">
            <div class="chat"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
CSS（styles.css）：
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.container {
    max-width: 80%;
    margin: 0 auto;
    padding: 2rem;
}

.sidebar {
    float: left;
    width: 40%;
    background-color: #ffffcc;
    padding: 1rem;
}

.main {
    float: right;
    width: 55%;
    background-color: #ffffff;
    padding: 1rem;
}

.chat {
    height: 400px;
    overflow-y: scroll;
    padding: 0 1rem;
}

.line {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.line--user {
    background-color: #ffe6e6;
}

.line--ai {
    background-color: #c7efc7;
}

.text {
    flex: 1;
    min-width: 50%;
    word-break: normal;
    margin: 0 1rem;
}

.number {
    color: #aaaaaa;
    font-size: 0.8em;
    margin-right: 0.5rem;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 4px solid #ffffff;
    border-top-color: #3a7bd9;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
JavaScript（script.js）：
const userJson = document.getElementById('userJson');
const chat = document.getElementsByClassName('chat')[0];

document.getElementById('userJson').addEventListener('input', (event) => {
    const jsonStr = event.target.value;
    const jsonArr = jsonStr.split('\n').filter(elem => elem.trim() !== '');
    const parsedData = JSON.parse(jsonStr);
    const prompt = parsedData[0].prompt;
    const userLines = jsonArr.map((elem, index) => ({ text: elem, isUser: true, messageNum: index + 1 }));
    const aiLines = [...new Array(parsedData.length - 1).keys()].map((elem, index) => ({ text: parsedData[element + 1], isUser: false, messageNum: index + 1 }));
    renderChat(prompt, userLines.concat(aiLines));
    const spinner = document.createElement('span');
    spinner.className = 'spinner';
    chat.insertBefore(spinner, chat.firstChild);
    setTimeout(() => {
        spinner.remove();
    }, 1000);
});

function renderChat(prompt, lines) {
    const chatLines = [];
    lines.forEach(line => {
        const lineElement = document.createElement('div');
        lineElement.classList.add('line', ...(line.isUser ? ['line--user'] : ['line--ai']));
        if (line.messageNum) {
            const numberElement = document.createElement('span');
            numberElement.classList.add('number');
            numberElement.textContent = ` (${line.messageNum})`;
            lineElement.appendChild(numberElement);
        }
        const textElement = document.createElement('span');
        textElement.classList.add('text');
        textElement.textContent = line.text;
        lineElement.appendChild(textElement);
        chatLines.push(lineElement);
    });
    const chatContainer = document.querySelector('.chat');
    chatLines.forEach(line => chatContainer.append(line));
}
以上所提供之HTML、JavaScript及CSS程式碼，建立了一個基本的使用者對談記錄顯示