Upload JVCGPT.html
Browse files- JVCGPT.html +215 -0
JVCGPT.html
ADDED
@@ -0,0 +1,215 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>JVCGPT - Faux Forum</title>
|
7 |
+
<style>
|
8 |
+
body {
|
9 |
+
font-family: Arial, sans-serif;
|
10 |
+
background-color: #121212;
|
11 |
+
color: #d3d3d3;
|
12 |
+
margin: 0;
|
13 |
+
padding: 0;
|
14 |
+
}
|
15 |
+
header {
|
16 |
+
background-color: #ff8000;
|
17 |
+
color: white;
|
18 |
+
padding: 10px;
|
19 |
+
text-align: center;
|
20 |
+
}
|
21 |
+
.container {
|
22 |
+
width: 90%;
|
23 |
+
max-width: 800px;
|
24 |
+
margin: 20px auto;
|
25 |
+
background-color: #1c1c1c;
|
26 |
+
border: 1px solid #333;
|
27 |
+
border-radius: 5px;
|
28 |
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
29 |
+
}
|
30 |
+
.topic-header {
|
31 |
+
padding: 10px;
|
32 |
+
background-color: #2a2a2a;
|
33 |
+
border-bottom: 1px solid #444;
|
34 |
+
color: #ff8000;
|
35 |
+
font-weight: bold;
|
36 |
+
}
|
37 |
+
.post {
|
38 |
+
display: flex;
|
39 |
+
align-items: flex-start;
|
40 |
+
padding: 10px;
|
41 |
+
border-bottom: 1px solid #444;
|
42 |
+
}
|
43 |
+
.post:last-child {
|
44 |
+
border-bottom: none;
|
45 |
+
}
|
46 |
+
.avatar {
|
47 |
+
margin-right: 10px;
|
48 |
+
}
|
49 |
+
.avatar img {
|
50 |
+
width: 50px;
|
51 |
+
height: 50px;
|
52 |
+
border-radius: 5px;
|
53 |
+
}
|
54 |
+
.post-content-wrapper {
|
55 |
+
flex: 1;
|
56 |
+
}
|
57 |
+
.post-meta {
|
58 |
+
font-size: 0.9em;
|
59 |
+
color: #aaa;
|
60 |
+
margin-bottom: 5px;
|
61 |
+
}
|
62 |
+
.post-meta .username {
|
63 |
+
font-weight: bold;
|
64 |
+
}
|
65 |
+
.post-meta .username.author {
|
66 |
+
color: #ff8000;
|
67 |
+
text-shadow: 0 0 5px #ff8000;
|
68 |
+
}
|
69 |
+
.post-meta .date {
|
70 |
+
font-size: 0.8em;
|
71 |
+
color: #aaa;
|
72 |
+
}
|
73 |
+
.post-content {
|
74 |
+
font-size: 1em;
|
75 |
+
color: #d3d3d3;
|
76 |
+
word-wrap: break-word;
|
77 |
+
}
|
78 |
+
.post-content img {
|
79 |
+
width: 75px;
|
80 |
+
height: 50px;
|
81 |
+
display: block;
|
82 |
+
margin: 10px 0;
|
83 |
+
}
|
84 |
+
footer {
|
85 |
+
text-align: center;
|
86 |
+
margin: 20px 0;
|
87 |
+
color: #888;
|
88 |
+
}
|
89 |
+
textarea {
|
90 |
+
width: 100%;
|
91 |
+
height: 150px;
|
92 |
+
margin: 20px 0;
|
93 |
+
padding: 10px;
|
94 |
+
background-color: #1c1c1c;
|
95 |
+
border: 1px solid #333;
|
96 |
+
border-radius: 5px;
|
97 |
+
color: #d3d3d3;
|
98 |
+
box-sizing: border-box;
|
99 |
+
font-family: Arial, sans-serif;
|
100 |
+
font-size: 1em;
|
101 |
+
}
|
102 |
+
button {
|
103 |
+
display: block;
|
104 |
+
margin: 10px auto;
|
105 |
+
padding: 10px 20px;
|
106 |
+
background-color: #007bff;
|
107 |
+
color: white;
|
108 |
+
border: none;
|
109 |
+
border-radius: 5px;
|
110 |
+
cursor: pointer;
|
111 |
+
font-size: 1em;
|
112 |
+
}
|
113 |
+
button:hover {
|
114 |
+
background-color: #0056b3;
|
115 |
+
}
|
116 |
+
</style>
|
117 |
+
</head>
|
118 |
+
<body>
|
119 |
+
|
120 |
+
<header>
|
121 |
+
<h1>JVCGPT</h1>
|
122 |
+
</header>
|
123 |
+
|
124 |
+
<div class="container">
|
125 |
+
<div class="topic-header">Sujet : <span id="topic-title">Titre du sujet</span></div>
|
126 |
+
<div id="posts-container">
|
127 |
+
<!-- Posts will be dynamically loaded here -->
|
128 |
+
</div>
|
129 |
+
</div>
|
130 |
+
|
131 |
+
<div class="container">
|
132 |
+
<textarea id="logInput" placeholder="Collez vos logs ici..."></textarea>
|
133 |
+
<button onclick="parseLogs()">Générer le topic</button>
|
134 |
+
</div>
|
135 |
+
|
136 |
+
<footer>
|
137 |
+
<p>JVCGPT - Faux Forum simulé par IA</p>
|
138 |
+
</footer>
|
139 |
+
|
140 |
+
<script>
|
141 |
+
function parseLogs() {
|
142 |
+
const logs = document.getElementById('logInput').value;
|
143 |
+
const postsContainer = document.getElementById('posts-container');
|
144 |
+
postsContainer.innerHTML = ''; // Clear previous posts
|
145 |
+
|
146 |
+
const blocks = logs.split('<|eot_id|>');
|
147 |
+
let topicTitle = '';
|
148 |
+
|
149 |
+
blocks.forEach(block => {
|
150 |
+
if (block.includes('<|start_header_id|>system<|end_header_id|>')) {
|
151 |
+
const titleMatch = block.match(/Sujet : "(.*?)"/);
|
152 |
+
if (titleMatch) {
|
153 |
+
topicTitle = titleMatch[1];
|
154 |
+
document.getElementById('topic-title').textContent = topicTitle;
|
155 |
+
}
|
156 |
+
} else {
|
157 |
+
const pseudoMatch = block.match(/<\|im_pseudo\|>(.*?)<\|end_pseudo\|>/);
|
158 |
+
const dateMatch = block.match(/<\|im_date\|>(.*?)<\|end_date\|>/);
|
159 |
+
const postMatch = block.match(/<\|begin_of_post\|>([\s\S]*?)<\|end_of_post\|>/);
|
160 |
+
|
161 |
+
if (pseudoMatch && dateMatch && postMatch) {
|
162 |
+
const username = pseudoMatch[1];
|
163 |
+
const date = dateMatch[1];
|
164 |
+
const message = postMatch[1];
|
165 |
+
|
166 |
+
const postDiv = document.createElement('div');
|
167 |
+
postDiv.className = 'post';
|
168 |
+
|
169 |
+
const avatarDiv = document.createElement('div');
|
170 |
+
avatarDiv.className = 'avatar';
|
171 |
+
const avatarImg = document.createElement('img');
|
172 |
+
avatarImg.src = 'https://image.jeuxvideo.com/avatar-md/default.jpg';
|
173 |
+
avatarDiv.appendChild(avatarImg);
|
174 |
+
|
175 |
+
const contentWrapper = document.createElement('div');
|
176 |
+
contentWrapper.className = 'post-content-wrapper';
|
177 |
+
|
178 |
+
const metaDiv = document.createElement('div');
|
179 |
+
metaDiv.className = 'post-meta';
|
180 |
+
|
181 |
+
const usernameDiv = document.createElement('div');
|
182 |
+
usernameDiv.textContent = username;
|
183 |
+
usernameDiv.className = 'username';
|
184 |
+
if (block.includes('<|start_header_id|>user<|end_header_id|>')) {
|
185 |
+
usernameDiv.classList.add('author');
|
186 |
+
}
|
187 |
+
metaDiv.appendChild(usernameDiv);
|
188 |
+
|
189 |
+
const dateDiv = document.createElement('div');
|
190 |
+
dateDiv.textContent = date;
|
191 |
+
dateDiv.className = 'date';
|
192 |
+
metaDiv.appendChild(dateDiv);
|
193 |
+
|
194 |
+
const contentDiv = document.createElement('div');
|
195 |
+
contentDiv.className = 'post-content';
|
196 |
+
|
197 |
+
const formattedMessage = message.replace(/https?:\/\/image\.noelshack\.com\/[^\s]+/g, (url) => {
|
198 |
+
return `<img src="${url}" alt="Image">`;
|
199 |
+
});
|
200 |
+
contentDiv.innerHTML = formattedMessage;
|
201 |
+
|
202 |
+
contentWrapper.appendChild(metaDiv);
|
203 |
+
contentWrapper.appendChild(contentDiv);
|
204 |
+
|
205 |
+
postDiv.appendChild(avatarDiv);
|
206 |
+
postDiv.appendChild(contentWrapper);
|
207 |
+
postsContainer.appendChild(postDiv);
|
208 |
+
}
|
209 |
+
}
|
210 |
+
});
|
211 |
+
}
|
212 |
+
</script>
|
213 |
+
|
214 |
+
</body>
|
215 |
+
</html>
|