|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JVCGPT - Faux Forum</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #121212;
|
|
color: #d3d3d3;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
header {
|
|
background-color: #ff8000;
|
|
color: white;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
.container {
|
|
width: 90%;
|
|
max-width: 800px;
|
|
margin: 20px auto;
|
|
background-color: #1c1c1c;
|
|
border: 1px solid #333;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.topic-header {
|
|
padding: 10px;
|
|
background-color: #2a2a2a;
|
|
border-bottom: 1px solid #444;
|
|
color: #ff8000;
|
|
font-weight: bold;
|
|
}
|
|
.post {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #444;
|
|
}
|
|
.post:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.avatar {
|
|
margin-right: 10px;
|
|
}
|
|
.avatar img {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 5px;
|
|
}
|
|
.post-content-wrapper {
|
|
flex: 1;
|
|
}
|
|
.post-meta {
|
|
font-size: 0.9em;
|
|
color: #aaa;
|
|
margin-bottom: 5px;
|
|
}
|
|
.post-meta .username {
|
|
font-weight: bold;
|
|
}
|
|
.post-meta .username.author {
|
|
color: #ff8000;
|
|
text-shadow: 0 0 5px #ff8000;
|
|
}
|
|
.post-meta .date {
|
|
font-size: 0.8em;
|
|
color: #aaa;
|
|
}
|
|
.post-content {
|
|
font-size: 1em;
|
|
color: #d3d3d3;
|
|
word-wrap: break-word;
|
|
}
|
|
.post-content img {
|
|
width: 75px;
|
|
height: 50px;
|
|
display: block;
|
|
margin: 10px 0;
|
|
}
|
|
footer {
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
color: #888;
|
|
}
|
|
textarea {
|
|
width: 100%;
|
|
height: 150px;
|
|
margin: 20px 0;
|
|
padding: 10px;
|
|
background-color: #1c1c1c;
|
|
border: 1px solid #333;
|
|
border-radius: 5px;
|
|
color: #d3d3d3;
|
|
box-sizing: border-box;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 1em;
|
|
}
|
|
button {
|
|
display: block;
|
|
margin: 10px auto;
|
|
padding: 10px 20px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
}
|
|
button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>JVCGPT</h1>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="topic-header">Sujet : <span id="topic-title">Titre du sujet</span></div>
|
|
<div id="posts-container">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<textarea id="logInput" placeholder="Collez vos logs ici..."></textarea>
|
|
<button onclick="parseLogs()">Générer le topic</button>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>JVCGPT - Faux Forum simulé par IA</p>
|
|
</footer>
|
|
|
|
<script>
|
|
function parseLogs() {
|
|
const logs = document.getElementById('logInput').value;
|
|
const postsContainer = document.getElementById('posts-container');
|
|
postsContainer.innerHTML = '';
|
|
|
|
const blocks = logs.split('<|eot_id|>');
|
|
let topicTitle = '';
|
|
|
|
blocks.forEach(block => {
|
|
if (block.includes('<|start_header_id|>system<|end_header_id|>')) {
|
|
const titleMatch = block.match(/Sujet : "(.*?)"/);
|
|
if (titleMatch) {
|
|
topicTitle = titleMatch[1];
|
|
document.getElementById('topic-title').textContent = topicTitle;
|
|
}
|
|
} else {
|
|
const pseudoMatch = block.match(/<\|im_pseudo\|>(.*?)<\|end_pseudo\|>/);
|
|
const dateMatch = block.match(/<\|im_date\|>(.*?)<\|end_date\|>/);
|
|
const postMatch = block.match(/<\|begin_of_post\|>([\s\S]*?)<\|end_of_post\|>/);
|
|
|
|
if (pseudoMatch && dateMatch && postMatch) {
|
|
const username = pseudoMatch[1];
|
|
const date = dateMatch[1];
|
|
const message = postMatch[1];
|
|
|
|
const postDiv = document.createElement('div');
|
|
postDiv.className = 'post';
|
|
|
|
const avatarDiv = document.createElement('div');
|
|
avatarDiv.className = 'avatar';
|
|
const avatarImg = document.createElement('img');
|
|
avatarImg.src = 'https://image.jeuxvideo.com/avatar-md/default.jpg';
|
|
avatarDiv.appendChild(avatarImg);
|
|
|
|
const contentWrapper = document.createElement('div');
|
|
contentWrapper.className = 'post-content-wrapper';
|
|
|
|
const metaDiv = document.createElement('div');
|
|
metaDiv.className = 'post-meta';
|
|
|
|
const usernameDiv = document.createElement('div');
|
|
usernameDiv.textContent = username;
|
|
usernameDiv.className = 'username';
|
|
if (block.includes('<|start_header_id|>user<|end_header_id|>')) {
|
|
usernameDiv.classList.add('author');
|
|
}
|
|
metaDiv.appendChild(usernameDiv);
|
|
|
|
const dateDiv = document.createElement('div');
|
|
dateDiv.textContent = date;
|
|
dateDiv.className = 'date';
|
|
metaDiv.appendChild(dateDiv);
|
|
|
|
const contentDiv = document.createElement('div');
|
|
contentDiv.className = 'post-content';
|
|
|
|
const formattedMessage = message.replace(/https?:\/\/image\.noelshack\.com\/[^\s]+/g, (url) => {
|
|
return `<img src="${url}" alt="Image">`;
|
|
});
|
|
contentDiv.innerHTML = formattedMessage;
|
|
|
|
contentWrapper.appendChild(metaDiv);
|
|
contentWrapper.appendChild(contentDiv);
|
|
|
|
postDiv.appendChild(avatarDiv);
|
|
postDiv.appendChild(contentWrapper);
|
|
postsContainer.appendChild(postDiv);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|
