| | <!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;
|
| | white-space: pre-wrap;
|
| | }
|
| | 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;
|
| | }
|
| |
|
| | .smiley-img {
|
| | width: auto;
|
| | height: auto;
|
| | }
|
| |
|
| |
|
| | .post-content img:not(.smiley-img) {
|
| | width: 75px;
|
| | height: 50px;
|
| | }
|
| |
|
| | </style>
|
| | </head>
|
| | <body>
|
| |
|
| | <header>
|
| | <h1>JVCGPT - Faux Forum</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é pour usage personnel</p>
|
| | </footer>
|
| |
|
| | <script>
|
| | function parseLogs() {
|
| | const logs = document.getElementById('logInput').value;
|
| | const postsContainer = document.getElementById('posts-container');
|
| | postsContainer.innerHTML = '';
|
| |
|
| | const smileyMap = {
|
| | ":)": "smileys/1.gif",
|
| | ":question:": "smileys/2.gif",
|
| | ":g)": "smileys/3.gif",
|
| | ":d)": "smileys/4.gif",
|
| | ":cd:": "smileys/5.gif",
|
| | ":globe:": "smileys/6.gif",
|
| | ":p)": "smileys/7.gif",
|
| | ":malade:": "smileys/8.gif",
|
| | ":pacg:": "smileys/9.gif",
|
| | ":pacd:": "smileys/10.gif",
|
| | ":noel:": "smileys/11.gif",
|
| | ":o))": "smileys/12.gif",
|
| | ":snif2:": "smileys/13.gif",
|
| | ":-(": "smileys/14.gif",
|
| | ":-((:": "smileys/15.gif",
|
| | ":mac:": "smileys/16.gif",
|
| | ":gba:": "smileys/17.gif",
|
| | ":hap:": "smileys/18.gif",
|
| | ":nah:": "smileys/19.gif",
|
| | ":snif:": "smileys/20.gif",
|
| | ":mort:": "smileys/21.gif",
|
| | ":ouch:": "smileys/22.gif",
|
| | ":-)))": "smileys/23.gif",
|
| | ":content:": "smileys/24.gif",
|
| | ":nonnon:": "smileys/25.gif",
|
| | ":cool:": "smileys/26.gif",
|
| | ":sleep:": "smileys/27.gif",
|
| | ":doute:": "smileys/28.gif",
|
| | ":hello:": "smileys/29.gif",
|
| | ":honte:": "smileys/30.gif",
|
| | ":-p": "smileys/31.gif",
|
| | ":lol:": "smileys/32.gif",
|
| | ":non2:": "smileys/33.gif",
|
| | ":monoeil:": "smileys/34.gif",
|
| | ":non:": "smileys/35.gif",
|
| | ":ok:": "smileys/36.gif",
|
| | ":oui:": "smileys/37.gif",
|
| | ":rechercher:": "smileys/38.gif",
|
| | ":rire:": "smileys/39.gif",
|
| | ":-D": "smileys/40.gif",
|
| | ":rire2:": "smileys/41.gif",
|
| | ":salut:": "smileys/42.gif",
|
| | ":sarcastic:": "smileys/43.gif",
|
| | ":up:": "smileys/44.gif",
|
| | ":(": "smileys/45.gif",
|
| | ":-)": "smileys/46.gif",
|
| | ":peur:": "smileys/47.gif",
|
| | ":bye:": "smileys/48.gif",
|
| | ":dpdr:": "smileys/49.gif",
|
| | ":fou:": "smileys/50.gif",
|
| | ":gne:": "smileys/51.gif",
|
| | ":dehors:": "smileys/52.gif",
|
| | ":fier:": "smileys/53.gif",
|
| | ":coeur:": "smileys/54.gif",
|
| | ":rouge:": "smileys/55.gif",
|
| | ":sors:": "smileys/56.gif",
|
| | ":ouch2:": "smileys/57.gif",
|
| | ":merci:": "smileys/58.gif",
|
| | ":svp:": "smileys/59.gif",
|
| | ":ange:": "smileys/60.gif",
|
| | ":diable:": "smileys/61.gif",
|
| | ":gni:": "smileys/62.gif",
|
| | ":spoiler:": "smileys/63.gif",
|
| | ":hs:": "smileys/64.gif",
|
| | ":desole:": "smileys/65.gif",
|
| | ":fete:": "smileys/66.gif",
|
| | ":sournois:": "smileys/67.gif",
|
| | ":hum:": "smileys/68.gif",
|
| | ":bravo:": "smileys/69.gif",
|
| | ":banzai:": "smileys/70.gif",
|
| | ":bave:": "smileys/71.gif",
|
| | ":ddb:": "smileys/ddb.gif",
|
| | ":fish:": "smileys/fish.gif",
|
| | ":cimer:": "smileys/cimer.gif",
|
| | ":hapoelparty:": "smileys/hapoelparty.gif",
|
| | ":loveyou:": "smileys/loveyou.gif",
|
| | ":cute:": "smileys/nyu.gif",
|
| | ":objection:": "smileys/objection.gif",
|
| | ":pf:": "smileys/pf.gif",
|
| | ":play:": "smileys/play.gif",
|
| | ":siffle:": "smileys/siffle.gif"
|
| | };
|
| |
|
| | const blocks = logs.split('<|eot_id|>');
|
| | let topicTitleSet = false;
|
| |
|
| | blocks.forEach(block => {
|
| | if (!topicTitleSet && block.includes('<|start_header_id|><|sujet|><|end_header_id|>')) {
|
| | const titleMatch = block.match(/Sujet : ?["']?(.*?)["']?$/);
|
| | if (titleMatch) {
|
| | document.getElementById('topic-title').textContent = titleMatch[1];
|
| | topicTitleSet = true;
|
| | }
|
| | }
|
| |
|
| | 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];
|
| | let message = postMatch[1];
|
| |
|
| |
|
| | Object.entries(smileyMap).forEach(([code, imgPath]) => {
|
| | const regex = new RegExp(escapeRegExp(code), "g");
|
| | message = message.replace(regex, `<img src="${imgPath}" alt="${code}" title="${code}" class="smiley-img" />`);
|
| | });
|
| |
|
| |
|
| | message = message.replace(/https?:\/\/image\.noelshack\.com\/[^\s]+/g, (url) => {
|
| | return `<img src="${url}" alt="Image">`;
|
| | });
|
| |
|
| |
|
| | 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|><|autheur|><|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';
|
| | contentDiv.innerHTML = message;
|
| |
|
| | contentWrapper.appendChild(metaDiv);
|
| | contentWrapper.appendChild(contentDiv);
|
| |
|
| | postDiv.appendChild(avatarDiv);
|
| | postDiv.appendChild(contentWrapper);
|
| | postsContainer.appendChild(postDiv);
|
| | }
|
| | });
|
| |
|
| |
|
| | function escapeRegExp(string) {
|
| | return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
| | }
|
| | }
|
| | </script>
|
| |
|
| |
|
| | </body>
|
| | </html>
|
| |
|
