Spaces:

Error410
/

jvcgpt

Running

App Files Files Community

Greums commited on Jan 17

Commit

1982de5

1 Parent(s): 650cdc7

first alpha version

Browse files

Files changed (45) hide show

.gitignore +24 -0
README.md +9 -11
index.html +13 -18
package-lock.json +0 -0
package.json +25 -0
public/favicon.svg +40 -0
src/app.tsx +202 -0
src/components/button/index.tsx +37 -0
src/components/button/style.module.scss +105 -0
src/components/container/index.tsx +10 -0
src/components/container/style.module.scss +6 -0
src/components/form/index.tsx +12 -0
src/components/form/style.module.scss +10 -0
src/components/input/index.tsx +86 -0
src/components/input/style.module.scss +45 -0
src/components/layout/index.tsx +29 -0
src/components/layout/style.module.scss +25 -0
src/components/preview/index.tsx +161 -0
src/components/preview/style.module.scss +103 -0
src/components/settings/index.tsx +51 -0
src/components/settings/style.module.scss +0 -0
src/components/slider/index.tsx +60 -0
src/components/slider/style.module.scss +330 -0
src/components/spinner/index.tsx +12 -0
src/components/spinner/style.module.scss +46 -0
src/components/topic/index.tsx +65 -0
src/components/topic/style.module.scss +51 -0
src/components/topics/index.tsx +107 -0
src/components/topics/style.module.scss +71 -0
src/index.ts +4 -0
src/reset.scss +115 -0
src/style.module.scss +13 -0
src/styles.scss +139 -0
src/types.d.ts +0 -0
src/utils/dates.ts +51 -0
src/utils/model.ts +107 -0
src/utils/oobabooga.ts +176 -0
src/utils/route.ts +9 -0
src/utils/settings.ts +26 -0
src/utils/smileys.ts +79 -0
src/utils/topics.ts +135 -0
src/utils/uuids.ts +5 -0
style.css +0 -28
tsconfig.json +21 -0
vite.config.ts +18 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md CHANGED Viewed

@@ -1,11 +1,9 @@
----
-title: Jvcgpt Simple Webpage
-emoji: 😻
-colorFrom: pink
-colorTo: pink
-sdk: static
-pinned: false
-license: mit
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+# JVCGPT
+## Getting Started
+-   `npm run dev` - Starts a dev server at http://localhost:5173/
+-   `npm run build` - Builds for production, emitting to `dist/`
+-   `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally

index.html CHANGED Viewed

@@ -1,19 +1,14 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="color-scheme" content="dark"/>
+    <title>JVCGPT</title>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/index.ts"></script>
+</body>
 </html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,25 @@

+{
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"classnames": "^2.5.1",
+		"preact": "^10.25.3",
+		"preact-feather": "^4.2.1"
+	},
+	"devDependencies": {
+		"@preact/preset-vite": "^2.9.3",
+		"eslint": "^8.57.1",
+		"eslint-config-preact": "^1.5.0",
+		"sass-embedded": "^1.83.4",
+		"typescript": "^5.7.3",
+		"vite": "^6.0.4"
+	},
+	"eslintConfig": {
+		"extends": "preact"
+	}
+}

public/favicon.svg ADDED Viewed

src/app.tsx ADDED Viewed

	@@ -0,0 +1,202 @@

+import {JSX} from "preact";
+import {useState, useEffect, useCallback} from "preact/hooks";
+import "./styles.scss";
+import style from "./style.module.scss";
+import {Container} from "./components/container";
+import {loadTopics, saveTopics} from "./utils/topics";
+import {Topic} from "./utils/topics";
+import {Topics} from "./components/topics";
+import {Topic as TopicComponent} from "./components/topic";
+import {Route, routes, RouteSetter} from "./utils/route";
+import {Settings} from "./components/settings";
+import {Layout} from "./components/layout";
+import {fetchSettings, saveSettings} from "./utils/settings";
+import {generateTopic, generatePosts} from "./utils/oobabooga";
+import {tokenizeTopic} from "./utils/model";
+export function App(): JSX.Element {
+    const [route, _setRoute] = useState<Route>(routes.home);
+    const [page, setPage] = useState<number>(0);
+    const [topicId, setTopicId] = useState<Topic["id"] | null>(null);
+    // null when loading
+    const [topics, setTopics] = useState<Topic[]>(loadTopics);
+    const [latestGeneratedTopicId, setLatestGeneratedTopicId] = useState<string|null>(null);
+    const [pendingGeneration, setPendingGeneration] = useState<boolean>(false);
+    useEffect(() => {
+        console.log("save !")
+        saveTopics(topics);
+    }, [topics]);
+    const _generateTopic = async (postsCount: number) => {
+        setPendingGeneration(true);
+        const topic = await generateTopic(settings, postsCount);
+        setLatestGeneratedTopicId(topic.id);
+        setTopics(topics => [...topics, topic]);
+        setPendingGeneration(false);
+    }
+    const addPosts = async (topicId: string, postsCount: number) => {
+        setPendingGeneration(true);
+        const posts = await generatePosts(settings, postsCount, topics.find(t => t.id === topicId));
+        const newTopics = [...topics]; // Clone topics to avoid bugs
+        const foundIndex = newTopics.findIndex(t => t.id === topicId);
+        newTopics[foundIndex].posts = newTopics[foundIndex].posts.concat(posts);
+        setTopics(newTopics)
+        setPendingGeneration(false);
+    }
+    // useEffect(() => {
+    //     setTopics(loadTopics());
+    // }, []);
+    const [settings, setSettings] = useState(fetchSettings)
+    useEffect(() => {
+        saveSettings(settings);
+    }, [settings]);
+    const updateRoute = useCallback(() => {
+        const url = new URL(window.location.href);
+        const route = url.searchParams.get("route");
+        if (route && route in routes) {
+            _setRoute(route as keyof typeof routes);
+        }
+        const page = url.searchParams.get("page");
+        if (page) {
+            setPage(parseInt(page));
+        }
+        const id = url.searchParams.get("id");
+        if (id) {
+            setTopicId(id);
+        }
+    }, []);
+    // Init page from url
+    useEffect(() => {
+        updateRoute()
+    }, []);
+    // Listen for URl change
+    useEffect(() => {
+        function listener() {
+            updateRoute()
+        }
+        window.addEventListener('popstate', listener);
+        return () => {
+            window.removeEventListener('popstate', listener)
+        }
+    }, []);
+    // Update URL params on route change
+    const setRoute: RouteSetter = useCallback((route: Route, page?: number, id?: string) => {
+        const url = new URL(window.location.href);
+        url.searchParams.set("route", route);
+        _setRoute(route);
+        if (page !== undefined) {
+            url.searchParams.set("page", String(page));
+            setPage(page);
+        }   else {
+            url.searchParams.delete("page");
+            setPage(0);
+        }
+        if (id !== undefined) {
+            url.searchParams.set("id", id);
+            setTopicId(id);
+        } else {
+            url.searchParams.delete("id");
+            setTopicId(null);
+        }
+        const newUrl = url.toString();
+        // Avoid to push the same URL mutiple time
+        if (newUrl !== window.location.href) {
+            window.history.pushState({}, "", newUrl);
+        }
+    }, []);
+    let routeComponent: JSX.Element = undefined;
+    let breadcrumbs: string = undefined;
+    let title: string = undefined;
+    switch (route) {
+        case routes.home:
+            routeComponent = <Topics
+                topics={topics}
+                setRoute={setRoute}
+                settings={settings}
+                setSettings={setSettings}
+                generateTopic={_generateTopic}
+                pendingGeneration={pendingGeneration}
+                latestGeneratedTopicId={latestGeneratedTopicId}
+            />
+            breadcrumbs = "accueil"
+            title = "Liste des topics"
+            break;
+        case routes.topic:
+            if (topicId === null) {
+                routeComponent = <div>Impossible d'afficher le topic</div>
+                breadcrumbs = "accueil"
+                title = "Topic"
+            } else {
+                if (topics === null) {
+                    routeComponent = <div>Chargement...</div>
+                    breadcrumbs = `accueil / topic`
+                    title = `Chargement...`
+                } else {
+                    const topic = topics.find(t => t.id === topicId);
+                    routeComponent = <TopicComponent
+                        topic={topic}
+                        settings={settings}
+                        setSettings={setSettings}
+                        addPosts={addPosts}
+                        pendingGeneration={pendingGeneration}
+                    />
+                    breadcrumbs = `accueil / ${topic.title}`
+                    title = `Topic : ${topic.title}`
+                }
+            }
+            break;
+        case routes.settings:
+            routeComponent = <Settings settings={settings} setSettings={setSettings}/>
+            breadcrumbs = "accueil / paramètres"
+            title = "Paramètres"
+            break;
+    }
+    return (
+        <>
+            <header className={style.header}>
+                <Container>
+                    <h1 className={style.logo}>
+                        <a href="#" onClick={e => {
+                            e.preventDefault();
+                            setRoute(routes.home);
+                        }}>
+                            JVCGPT
+                        </a>
+                    </h1>
+                </Container>
+            </header>
+            <main>
+                <Container>
+                    <Layout
+                        breadcrumbs={breadcrumbs}
+                        title={title}
+                        setRoute={setRoute}
+                    >
+                        {routeComponent}
+                    </Layout>
+                </Container>
+            </main>
+        </>
+    );
+}

src/components/button/index.tsx ADDED Viewed

	@@ -0,0 +1,37 @@

+import {ComponentChildren, JSX} from 'preact';
+import cn from 'classnames';
+import style from "./style.module.scss";
+export function Button(props: {
+    loading?: boolean;
+    onClick?: () => void;
+    className?: string;
+    secondary?: boolean;
+    disabled?: boolean;
+    children: ComponentChildren;
+}) {
+    const disabled = props.disabled || props.loading;
+    const buttonClass = cn(style.btn, {[style.secondary]: props.secondary}, 'button', props.className, {[style.disabled]:disabled});
+    let spinner: JSX.Element = undefined;
+    if (props.loading) {
+        spinner = <span className={style.spinner}/>
+    }
+    return (
+        <button
+            type="button"
+            onClick={() => {
+                if (!disabled) {
+                    props.onClick()
+                }
+            }}
+            className={buttonClass}
+            disabled={disabled}
+        >
+            {spinner}
+            {props.children}
+        </button>
+    );
+}

src/components/button/style.module.scss ADDED Viewed

	@@ -0,0 +1,105 @@

+.btn {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 1.25rem;
+  margin: 0;
+  border: 0.0625rem solid var(--text-secondary);
+  height: 2.25rem;
+  line-height: 2.25rem;
+  font-size: 0.9375rem;
+  text-decoration: none;
+  color: var(--text-secondary);
+  border-radius: 1.125rem;
+  white-space: nowrap;
+  cursor: pointer;
+  //overflow: hidden;
+  &:not(.disabled):hover {
+    border-color: var(--text-hover-secondary);
+    color: var(--text-hover-secondary);
+  }
+  //
+  //&:active {
+  //  //border-color: var(--text-secondary);
+  //  background: var(--text-secondary);
+  //}
+  &.secondary {
+    color: #fff;
+    background-color: var(--text-secondary);
+    &:not(.disabled):hover {
+      border-color: var(--text-hover-secondary);
+      background: var(--text-hover-secondary);
+      color: #fff;
+    }
+  }
+}
+.spinner {
+  font-size: 10px;
+  //margin: 50px auto;
+  margin-right: 1em;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 50%;
+  background: #ffffff;
+  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  position: relative;
+  animation: load3 1.4s infinite linear;
+  transform: translateZ(0);
+  &:before {
+    width: 50%;
+    height: 50%;
+    background: #ffffff;
+    border-radius: 100% 0 0 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+  }
+  &:after {
+    background: var(--text-secondary);
+    width: 75%;
+    height: 75%;
+    border-radius: 50%;
+    content: '';
+    margin: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+@keyframes load3 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.disabled {
+  cursor: not-allowed;
+  &:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #4f4f4f;
+    border: 0.0625rem solid #4f4f4f;
+    border-radius: 1.125rem;
+    opacity: 0.5;
+    box-sizing: content-box;
+  }
+}

src/components/container/index.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import type {ComponentChildren} from "preact";
+import style from "./style.module.scss"
+export function Container(props: { children: ComponentChildren }) {
+    return (
+        <div class={style.container}>
+            {props.children}
+        </div>
+    );
+}

src/components/container/style.module.scss ADDED Viewed

	@@ -0,0 +1,6 @@

+.container {
+  margin: 0 auto;
+  min-width: 20rem;
+  max-width: 73.5rem;
+  padding: 0 0.5rem;
+}

src/components/form/index.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+import type {ComponentChildren} from "preact";
+import style from "./style.module.scss"
+export function FormGroup(props: {
+    children: ComponentChildren,
+}) {
+    return (
+        <div className={style.formGroup}>
+            {props.children}
+        </div>
+    )
+}

src/components/form/style.module.scss ADDED Viewed

	@@ -0,0 +1,10 @@

+.formGroup {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+  label {
+    font-size: 1rem;
+    margin-bottom: 1rem;
+  }
+}

src/components/input/index.tsx ADDED Viewed

	@@ -0,0 +1,86 @@

+import {FunctionalComponent} from "preact";
+import {useState} from "preact/hooks";
+import cn from "classnames";
+import {JSX} from "preact";
+// import GenericEventHandler = JSXInternal.GenericEventHandler;
+import style from "./style.module.scss";
+import {Settings} from "preact-feather";
+import {FeatherProps} from "preact-feather/src/types";
+interface InputProps<T> {
+    type: "text" | "number" | "email" | "password";
+    icon: FunctionalComponent<FeatherProps>;
+    value: T;
+    placeholder?: string;
+    onChange: (value: T) => void;
+    className?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+}
+export const Input: FunctionalComponent<InputProps<string | number>> = ({
+                                                                            type,
+                                                                            icon,
+                                                                            value,
+                                                                            placeholder,
+                                                                            onChange,
+                                                                            className,
+                                                                            disabled,
+                                                                            id,
+                                                                            name,
+                                                                        }) => {
+    const [focused, setFocused] = useState(false);
+    const inputClass = cn(style.input, "generic-input", className, {
+        focused,
+        disabled,
+    });
+    const handleInputChange: JSX.GenericEventHandler<HTMLInputElement> = (event) => {
+        console.log("handleInputChange")
+        const target = event.target as HTMLInputElement;
+        onChange(type === "number" ? (parseFloat(target.value) || 0) : target.value);
+    };
+    const Icon = icon;
+    return (
+        <div className={style.wrapper}>
+            <Icon className={style.icon} size={18}/>
+            <input
+                // required=""
+                // minLength="3"
+                // maxLength="15"
+                title="Le pseudo doit avoir une longueur comprise entre 3 et 15 caractères."
+                // tabIndex="10"
+                type={type}
+                id={id}
+                name={name}
+                value={value}
+                placeholder={placeholder}
+                // onChange={handleInputChange}
+                onInput={handleInputChange}
+                className={inputClass}
+                disabled={disabled}
+                onFocus={() => setFocused(true)}
+                onBlur={() => setFocused(false)}
+            />
+        </div>
+    )
+    return (
+        <input
+            type={type}
+            id={id}
+            name={name}
+            value={value}
+            placeholder={placeholder}
+            onChange={handleInputChange}
+            className={inputClass}
+            disabled={disabled}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+        />
+    );
+};

src/components/input/style.module.scss ADDED Viewed

	@@ -0,0 +1,45 @@

+.wrapper {
+  position: relative;
+  margin-bottom: 0.9375rem
+}
+.icon {
+  position: absolute;
+  top: .625rem;
+  left: .625rem;
+  font-size: 1.125rem;
+  line-height: 1em;
+}
+.input {
+  display: block;
+  width: 100%;
+  //padding: 0.4375rem 0.75rem;
+  //font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--input-text-color);
+  background-color: var(--input-bg-color);
+  background-clip: padding-box;
+  border: 0.0625rem solid var(--input-border-color);
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 0.75rem;
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, .075);
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  padding-top: 0;
+  padding-right: .3125rem;
+  //padding-left: 0.4375rem;
+  padding-left: 2.5rem;
+  padding-bottom: 0;
+  font-weight: 700;
+  height: 2.5rem;
+  font-size: 1rem;
+  &::placeholder {
+    color: var(--input-placeholder-color);
+    font-weight: 400;
+  }
+}

src/components/layout/index.tsx ADDED Viewed

	@@ -0,0 +1,29 @@

+import type {ComponentChildren} from "preact";
+import style from "./style.module.scss"
+import {Settings} from "preact-feather"
+import {Route, routes} from "../../utils/route";
+export function Layout(props: {
+    breadcrumbs: string,
+    title: string,
+    setRoute: (route: Route) => void,
+    children: ComponentChildren
+}) {
+    return(
+        <div>
+            <nav className={style.breadcrumbs}>
+                {props.breadcrumbs}
+                <div className={style.actions}>
+                    <a href="#" title="Paramètres" onClick={e => {
+                        e.preventDefault();
+                        props.setRoute(routes.settings);
+                    }}>
+                        <Settings size={18}/>
+                    </a>
+                </div>
+            </nav>
+            <h2>{props.title}</h2>
+            {props.children}
+        </div>
+    )
+}

src/components/layout/style.module.scss ADDED Viewed

	@@ -0,0 +1,25 @@

+.breadcrumbs {
+  font-weight: 700;
+  color: var(--text-muted-color);
+  font-size: .8125rem;
+  margin-top: 1.25rem;
+  margin-bottom: 0.9375rem;
+  display: flex;
+}
+.actions {
+  margin-left: auto;
+  a:hover {
+    color: var(--text-muted-hover-color);
+  }
+}
+//.title {
+//  font-size: 1.59375rem;
+//  line-height: 1.25;
+//  font-weight: 500;
+//  color: var(--text-color);
+//  padding-bottom: 1.5rem;
+//}

src/components/preview/index.tsx ADDED Viewed

	@@ -0,0 +1,161 @@

+import style from "./style.module.scss";
+import {useMemo} from "preact/hooks";
+import {smileysMap} from "../../utils/smileys";
+// const blocks = {
+//     text: "text",
+//     img: "img",
+// }
+//
+// type Segment = {
+//     type: keyof typeof blocks,
+//     content: string,
+// }
+export function Preview(props: {
+    raw: string,
+}) {
+    // console.log(parseRaw(props.raw))
+    // const segments = useMemo(() => {
+    //     return parseRaw(props.raw);
+    // }, [props.raw]);
+    const html = useMemo(() => {
+        // console.log(escapeHtml(props.raw))
+        const escaped = escapeHtml(props.raw);
+        // const withBr = escaped.replace(/\n/g, '<br/>')
+        // console.log(withBr)
+        return injectHTML(escaped).replace(/\n/g, '<br/>')
+    }, [props.raw]);
+    return (
+        <div className={style.wrapper} dangerouslySetInnerHTML={{__html: html}}/>
+    )
+    //
+    // return (
+    //     <div className={style.wrapper}>
+    //         {segments.map(seg => {
+    //             if (seg.type === blocks.text) {
+    //                 return seg.content
+    //             }
+    //
+    //             if (seg.type === blocks.img) {
+    //                 return <img width="68" height="51" alt="noelshak" src={seg.content}/>
+    //             }
+    //         })}
+    //     </div>
+    // )
+}
+const jvcodeMap: [RegExp, string | ((reg: RegExp, raw: string) => string)][] = [
+    // [/(https?:\/\/image\.noelshack\.com\/\S+)/g]: "<img width=\"68\" height=\"51\" alt=\"noelshak\" src=\"$1\"/>"
+    [ // Stickers
+        /(^| )https?:\/\/image\.noelshack\.com\/(?:fichiers|minis)(\S+)/gm,
+        "$1<img width=\"68\" height=\"51\" alt=\"noelshak\" src=\"https://image.noelshack.com/minis/$2\"/>"
+    ],
+    [ // Vocaroo
+        /(^| )https:\/\/vocaroo.com\/(.+)/gm,
+        "$1<div><iframe width=\"300\" height=\"60\" src=\"https://vocaroo.com/embed/$2?autoplay=0\" frameborder=\"0\" allow=\"autoplay\"></iframe></div>"
+    ],
+    [ // Citations
+        /^(?:&gt;.*(?:\n&gt;.*)*)/g,
+        (reg, raw) => {
+            // return raw
+            const match = reg.exec(raw);
+            if (!match) return raw;
+            console.log(match);
+            const index = match.index;
+            const length = match[0].length;
+            return raw.substring(0, index) + `<blockquote>${match[0].replace(/^&gt;/gm, "")}</blockquote>` + raw.substring(index + length);
+            // console.log(match)
+            // const content = match[0].replace(/^>/gm, "");
+            // return `<blockquote>${content}</blockquote>`;
+        }
+    ],
+    [ // Spoil
+        /&lt;spoil&gt;(.*?)&lt;\/spoil&gt;/gm,
+        (reg, raw) => { // Citations
+            return raw.replace(reg, (_, matched) => {
+                const randomId = (Math.random() + 1).toString(36).substring(2);
+                return `<span class="bloc-spoil-jv"><input type="checkbox" id="${randomId}" class="open-spoil"><label class="barre-head" for="${randomId}"><span class="txt-spoil">Spoil</span></label><span class="contenu-spoil">${matched}</span></span>`;
+            });
+        }
+    ],
+    [ // Regular links
+        /(^| )(https?:\/\/\S+)/gm,
+        "$1<a href=\"$2\" target=\"_blank\">$2</a>"
+    ],
+    // Generate regexes for smileys
+    // ...smileysMap.map((maping) => {
+    //     return [new RegExp(
+    //         Object.keys(smileysMap).map(s => (
+    //             "(?:(?:^| )" + s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ")"
+    //         )).join("|"), "gm"
+    //     ), `<img src="${maping[1]}" width="16" height="16" alt=""/>`]
+    // })
+    // (() => {
+    //     new RegExp(
+    //         smileysMap.map((mapping) => (
+    //             "(?:(?:^| )" + s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ")"
+    //         )).join("|"), "gm"
+    //     )
+    //     return [/(https?:\/\/image\.noelshack\.com\/\S+)/g, "<img width=\"68\" height=\"51\" alt=\"noelshak\" src=\"$1\"/>"]
+    // })()
+    ...smileysMap.map(mapping => {
+        return [
+            new RegExp("(?:(^| )" + mapping[0].replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ")", "gm"),
+            `$1<img src="https://image.jeuxvideo.com/smileys_img/${mapping[1]}.gif" alt="${mapping[0]}"/>`
+        ];
+    })
+];
+// console.log(jvcodeMap)
+function injectHTML(input: string): string {
+    let previousInput;
+    // console.log(Object.entries(jvcodeMap))
+    do {
+        previousInput = input; // Keep track of input before replacements
+        for (const [regex, htmlOrFunc] of jvcodeMap) {
+            // const regex = new RegExp(bbCode, 'gi');
+            // console.log(regex, html, input)
+            if (htmlOrFunc instanceof Function) {
+                input = htmlOrFunc(regex, input);
+            } else {
+                input = input.replace(regex, htmlOrFunc as string);
+            }
+        }
+        // } while (input !== previousInput); // Repeat until no more replacements
+    } while (false); // Repeat until no more replacements
+    // console.log(input)
+    return input;
+}
+function escapeHtml(unsafe: string): string {
+    // unsafe.re
+    return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+// function parseRaw(raw: string): Segment[] {
+//     // Regex pour capturer les URLs (HTTP, HTTPS)
+//     const urlRegex = /(https?:\/\/[^\s]+)/g;
+//
+//     // Découper le texte en utilisant la regex, en gardant les URLs comme blocs séparés
+//     return raw.split(urlRegex).filter(seg => seg !== "").map(seg => {
+//         return {
+//             type: seg.includes(".png") || seg.includes(".jpg") ? blocks.img : blocks.text,
+//             content: seg,
+//         }
+//     });
+// }

src/components/preview/style.module.scss ADDED Viewed

	@@ -0,0 +1,103 @@

+.wrapper {
+  //white-space: pre-line;
+  :global {
+    .bloc-spoil-jv {
+      //margin-bottom: 0.9375rem;
+      margin-bottom: 0;
+      display: inline;
+      .open-spoil {
+        position: absolute;
+        left: -999rem;
+      }
+      .barre-head {
+        //height: 1.5rem;
+        //line-height: 1.5rem;
+        //cursor: pointer;
+        //position: relative;
+        //display: block;
+        height: auto;
+        line-height: inherit;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+        display: inline;
+        .txt-spoil {
+          //position: absolute;
+          //top: 0;
+          //left: 0;
+          //width: 4.6875rem;
+          //font-size: .9285em;
+          //text-align: center;
+          //color: #fff;
+          //text-transform: uppercase;
+          //background: #fd374e;
+          //font-weight: 700;
+          //display: block;
+          //border-radius: 0.25rem;
+          position: static;
+          display: inline;
+          padding: 0.125rem 1.25rem;
+          line-height: inherit;
+          top: 0;
+          left: 0;
+          width: 4.6875rem;
+          font-size: .9285em;
+          text-align: center;
+          color: #fff;
+          text-transform: uppercase;
+          background: #fd374e;
+          font-weight: 700;
+          //display: block;
+          border-radius: 0.25rem;
+        }
+      }
+      .contenu-spoil {
+        background: #f4d6da;
+        color: #212121;
+        padding: 0.625rem;
+        display: none;
+        //text-align: justify;
+        text-align: left;
+        overflow: hidden;
+      }
+      .open-spoil:checked ~ .contenu-spoil {
+        display: inline;
+      }
+    }
+  }
+  blockquote {
+    text-align: left;
+    //margin-bottom: 0.9375rem;
+    border-left: 0.3125rem solid rgba(0, 0, 0, .2);
+    color: var(--text-blockquote-color);
+    //margin-left: 0.9375rem;
+    padding: 0.625rem;
+    background: none;
+    font-style: normal;
+    font-size: inherit;
+    margin: 0 0 0.9375rem 1rem;
+  }
+  a {
+    color: var(--link-color);
+    text-decoration: none;
+    &:hover {
+      color: var(--text-hover-secondary);
+      text-decoration: none;
+    }
+  }
+}
+.img {
+}

src/components/settings/index.tsx ADDED Viewed

	@@ -0,0 +1,51 @@

+import {Input} from "../input";
+import {Link, Thermometer, Sliders} from "preact-feather";
+import {Button} from "../button";
+import {useEffect, useState} from "preact/hooks";
+import {fetchSettings, saveSettings, Settings as SettingsType} from "../../utils/settings";
+import {Slider} from "../slider";
+import {FormGroup} from "../form";
+export function Settings(props: {
+    settings: SettingsType,
+    setSettings: (settings: SettingsType) => void,
+}) {
+    // const [settings, setSettings] = useState(fetchSettings)
+    //
+    // useEffect(() => {
+    //     saveSettings(settings);
+    // }, [settings]);
+    return <div>
+        <form>
+            <FormGroup>
+                <label htmlFor="api">API</label>
+                <Input
+                    type="text"
+                    placeholder="URl d'API ex: https://ouruq7zepnehg2-5000.proxy.runpod.net/"
+                    icon={Link}
+                    value={props.settings.apiURL}
+                    onChange={(v) => props.setSettings({...props.settings, apiURL: v as string})}
+                />
+            </FormGroup>
+            <FormGroup>
+                <label for="temperature">Temperature</label>
+                <Slider
+                    name="temperature"
+                    value={props.settings.temperature}
+                    onChange={(v) => props.setSettings({...props.settings, temperature: v})}
+                    min={0}
+                    max={5}
+                    step={0.1}
+                />
+            </FormGroup>
+            <Button
+                onClick={() => {
+                    history.go(-1)
+                }}
+            >
+                Retour
+            </Button>
+        </form>
+    </div>
+}

src/components/settings/style.module.scss ADDED Viewed

File without changes

src/components/slider/index.tsx ADDED Viewed

	@@ -0,0 +1,60 @@

+// import * as RadixSlider from "@radix-ui/react-slider";
+// import style from "./style.module.scss";
+// import {useState} from "preact/hooks";
+//
+// export function Slider(props: {
+//     value: number,
+//     min: number,
+//     max: number,
+//     step: number,
+//     onChange: (value: number) => void,
+//     className?: string,
+//     disabled?: boolean,
+// }) {
+//     const [value, setValue] = useState(1)
+//
+//     return (
+//         <div className={style.rangeSlider} style={`--min:0; --max:5; --step:0.5; --value:${value}; --text-value:"${value}"`}>
+//             <input
+//                 type="range"
+//                 min="0"
+//                 max="5"
+//                 step="0.1"
+//                 value={value}
+//                 onInput={(e) => setValue(Number((e.target as HTMLInputElement).value))}
+//                 // onInput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))"
+//             />
+//             <output></output>
+//             <div className={style.progress}></div>
+//         </div>
+//     )
+// }
+import style from "./style.module.scss";
+export function Slider(props: {
+    name: string,
+    value: number,
+    min: number,
+    max: number,
+    step: number,
+    onChange: (value: number) => void,
+    className?: string,
+    disabled?: boolean,
+}) {
+    return (
+        <div className={style.rangeSlider} style={`--min:${props.min}; --max:${props.max}; --step:${Math.max(props.step, 0.5)}; --value:${props.value}; --text-value:"${props.value}";`}>
+            <input
+                name={props.name}
+                type="range"
+                min={props.min}
+                max={props.max}
+                step={props.step}
+                value={props.value}
+                onInput={(e) => props.onChange(Number((e.target as HTMLInputElement).value))}
+            />
+            <output></output>
+            <div className={style.progress}></div>
+        </div>
+    )
+}

src/components/slider/style.module.scss ADDED Viewed

	@@ -0,0 +1,330 @@

+.rangeSlider {
+  //width: Clamp(300px, 50vw, 800px);
+  //min-width: 200px;
+  --primary-color: var(--text-secondary);
+  --value-offset-y: var(--ticks-gap);
+  --value-active-color: white;
+  --value-background: transparent;
+  --value-background-hover: var(--primary-color);
+  --value-font: 700 12px/1 Arial;
+  --fill-color: var(--primary-color);
+  --progress-background: #eee;
+  --progress-radius: 20px;
+  --track-height: calc(var(--thumb-size) / 2);
+  --min-max-font: 12px Arial;
+  --min-max-opacity: 0.5;
+  --min-max-x-offset: 50%;
+  --thumb-size: 20px;
+  --thumb-color: white;
+  --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5) inset,
+  0 0 0 99px var(--thumb-color) inset;
+  --thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color),
+  0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(0, 0, 0, 0.4);
+  --thumb-shadow-hover: var(--thumb-shadow);
+  --ticks-thickness: 1px;
+  --ticks-height: 5px;
+  --ticks-gap: var(
+                  --ticks-height,
+                  0
+  ); // vertical space between the ticks and the progress bar
+  --ticks-color: silver;
+  // ⚠️ BELOW VARIABLES SHOULD NOT BE CHANGED
+  --step: 1;
+  --ticks-count: Calc(var(--max) - var(--min)) / var(--step);
+  --maxTicksAllowed: 30;
+  --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
+  --x-step: Max(
+          var(--step),
+          var(--too-many-ticks) * (var(--max) - var(--min))
+  ); // manipulate the number of steps if too many ticks exist, so there would only be 2
+  --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
+  --tickIntervalPerc: calc(
+          (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) *
+          var(--tickEvery, 1)
+  );
+  --value-a: Clamp(
+          var(--min),
+          var(--value, 0),
+          var(--max)
+  ); // default value ("--value" is used in single-range markup)
+  --value-b: var(--value, 0); // default value
+  --text-value-a: var(--text-value, "");
+  --completed-a: calc(
+          (var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100
+  );
+  --completed-b: calc(
+          (var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100
+  );
+  --ca: Min(var(--completed-a), var(--completed-b));
+  --cb: Max(var(--completed-a), var(--completed-b));
+  // breakdown of the below super-complex brain-breaking CSS math:
+  // "clamp" is used to ensure either "-1" or "1"
+  // "calc" is used to inflat the outcome into a huge number, to get rid of any value between -1 & 1
+  // if absolute diff of both completed % is above "5" (%)
+  // ".001" bumps the value just a bit, to avoid a scenario where calc resulted in "0" (then clamp will also be "0")
+  --thumbs-too-close: Clamp(
+          -1,
+          1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001),
+          1
+  );
+  @mixin thumb {
+    appearance: none;
+    height: var(--thumb-size);
+    width: var(--thumb-size);
+    //transform: var(--thumb-transform);
+    transform: translateY(-4px);
+    border-radius: var(--thumb-radius, 50%);
+    background: var(--thumb-color);
+    box-shadow: var(--thumb-shadow);
+    border: none;
+    pointer-events: auto;
+    transition: 0.1s;
+  }
+  display: inline-block;
+  height: Max(var(--track-height), var(--thumb-size));
+  // margin: calc((var(--thumb-size) - var(--track-height)) * -.25) var(--thumb-size) 0;
+  background: linear-gradient(
+                  to right,
+                  var(--ticks-color) var(--ticks-thickness),
+                  transparent 1px
+  ) repeat-x;
+  background-size: var(--tickIntervalPerc) var(--ticks-height);
+  background-position-x: calc(
+          var(--thumb-size) / 2 - var(--ticks-thickness) / 2
+  );
+  background-position-y: var(--flip-y, bottom);
+  padding-bottom: var(--flip-y, var(--ticks-gap));
+  padding-top: calc(var(--flip-y) * var(--ticks-gap));
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+  position: relative;
+  z-index: 1;
+  &[data-ticks-position="top"] {
+    --flip-y: 1;
+  }
+  // mix/max texts
+  &::before,
+  &::after {
+    --offset: calc(var(--thumb-size) / 2);
+    content: counter(x);
+    display: var(--show-min-max, block);
+    font: var(--min-max-font);
+    position: absolute;
+    bottom: var(--flip-y, -2.5ch);
+    top: calc(-2.5ch * var(--flip-y));
+    opacity: var(--min-max-opacity);
+    //transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));
+    transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1));
+    pointer-events: none;
+  }
+  &::before {
+    --before: 1;
+    counter-reset: x var(--min);
+    left: var(--offset);
+  }
+  &::after {
+    counter-reset: x var(--max);
+    right: var(--offset);
+  }
+  &__values {
+    position: relative;
+    top: 50%;
+    line-height: 0;
+    text-align: justify;
+    width: 100%;
+    pointer-events: none;
+    margin: 0 auto;
+    z-index: 5;
+    // trick so "justify" will work
+    &::after {
+      content: "";
+      width: 100%;
+      display: inline-block;
+      height: 0;
+      background: red;
+    }
+  }
+  .progress {
+    --start-end: calc(var(--thumb-size) / 2);
+    --clip-end: calc(100% - (var(--cb)) * 1%);
+    --clip-start: calc(var(--ca) * 1%);
+    --clip: inset(-20px var(--clip-end) -20px var(--clip-start));
+    position: absolute;
+    left: calc(var(--start-end) - 10px);
+    right: calc(var(--start-end) - 10px);
+    top: calc(
+            var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 -
+            var(--track-height)
+    );
+    //  transform: var(--flip-y, translateY(-50%) translateZ(0));
+    height: calc(var(--track-height));
+    background: var(--progress-background, #eee);
+    pointer-events: none;
+    z-index: -1;
+    border-radius: var(--progress-radius);
+    // fill area
+    &::before {
+      content: "";
+      position: absolute;
+      // left: Clamp(0%, calc(var(--ca) * 1%), 100%); // confine to 0 or above
+      // width: Min(100%, calc((var(--cb) - var(--ca)) * 1%)); // confine to maximum 100%
+      left: 0;
+      right: 0;
+      clip-path: var(--clip);
+      top: 0;
+      bottom: 0;
+      background: var(--fill-color, black);
+      box-shadow: var(--progress-flll-shadow);
+      z-index: 1;
+      border-radius: inherit;
+    }
+    // shadow-effect
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      box-shadow: var(--progress-shadow);
+      pointer-events: none;
+      border-radius: inherit;
+    }
+  }
+  & > input {
+    -webkit-appearance: none;
+    width: 100%;
+    height: var(--thumb-size);
+    margin: 0;
+    position: absolute;
+    left: 0;
+    top: calc(
+            50% - Max(var(--track-height), var(--thumb-size)) / 2 +
+            calc(var(--ticks-gap) / 2 * var(--flip-y, -1))
+    );
+    cursor: -webkit-grab;
+    cursor: grab;
+    outline: none;
+    background: none;
+    &:not(:only-of-type) {
+      pointer-events: none;
+    }
+    &::-webkit-slider-thumb {
+      @include thumb;
+    }
+    &::-moz-range-thumb {
+      @include thumb;
+    }
+    &::-ms-thumb {
+      @include thumb;
+    }
+    &:hover {
+      --thumb-shadow: var(--thumb-shadow-hover);
+      & + output {
+        --value-background: var(--value-background-hover);
+        --y-offset: -8px;
+        color: var(--value-active-color);
+        box-shadow: 0 0 0 3px var(--value-background);
+      }
+    }
+    &:active {
+      --thumb-shadow: var(--thumb-shadow-active);
+      cursor: grabbing;
+      z-index: 2; // when sliding left thumb over the right or vice-versa, make sure the moved thumb is on top
+      + output {
+        transition: 0s;
+      }
+    }
+    &:nth-of-type(1) {
+      --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1);
+      & + output {
+        &:not(:only-of-type) {
+          --flip: calc(var(--thumbs-too-close) * -1);
+        }
+        --value: var(--value-a);
+        --x-offset: calc(var(--completed-a) * -1%);
+        &::after {
+          content: var(--prefix, "") var(--text-value-a) var(--suffix, "");
+        }
+      }
+    }
+    &:nth-of-type(2) {
+      --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1);
+      & + output {
+        --value: var(--value-b);
+      }
+    }
+    // non-multiple range should not clip start of progress bar
+    &:only-of-type {
+      ~ .progress {
+        --clip-start: 0;
+      }
+    }
+    & + output {
+      --flip: -1;
+      --x-offset: calc(var(--completed-b) * -1%);
+      --pos: calc(
+              ((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%
+      );
+      pointer-events: none;
+      position: absolute;
+      z-index: 5;
+      background: var(--value-background);
+      border-radius: 10px;
+      //padding: 2px 4px;
+      padding: 0 4px;
+      left: var(--pos);
+      transform: translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip)));
+      transition: all 0.12s ease-out, left 0s;
+      &::after {
+        content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
+        font: var(--value-font);
+      }
+    }
+  }
+}

src/components/spinner/index.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+import cn from "classnames"
+import style from "./style.module.scss"
+export function Spinner(props: {className?: string}) {
+    return (
+        <div className={cn(style.spinnerSquare, props.className)}>
+            <div className={style.square1}></div>
+            <div className={style.square2}></div>
+            <div className={style.square3}></div>
+        </div>
+    )
+}

src/components/spinner/style.module.scss ADDED Viewed

	@@ -0,0 +1,46 @@

+.spinnerSquare {
+  display: flex;
+  flex-direction: row;
+  width: 90px;
+  height: 120px;
+  > div {
+    width: 17px;
+    height: 80px;
+    margin: auto auto;
+    border-radius: 4px;
+  }
+}
+.square1 {
+  animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
+}
+.square2 {
+  animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite;
+}
+.square3 {
+  animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite;
+}
+@keyframes square-anim {
+  0% {
+    height: 80px;
+    background-color: var(--text-secondary);
+  }
+  20% {
+    height: 80px;
+  }
+  40% {
+    height: 120px;
+    background-color: var(--text-hover-secondary);
+  }
+  80% {
+    height: 80px;
+  }
+  100% {
+    height: 80px;
+    background-color: var(--text-secondary);
+  }
+}

src/components/topic/index.tsx ADDED Viewed

	@@ -0,0 +1,65 @@

+import {Post as PostType, Topic as TopicType} from "../../utils/topics";
+import style from "./style.module.scss";
+import {Preview} from "../preview";
+import {iso8601ToFrench} from "../../utils/dates";
+import {FormGroup} from "../form";
+import {Slider} from "../slider";
+import {Button} from "../button";
+import {Settings as SettingsType, Settings} from "../../utils/settings";
+export function Topic(props: {
+    topic: TopicType,
+    settings: Settings,
+    setSettings: (settings: SettingsType) => void,
+    addPosts: (topicId: string, postsCount: number) => Promise<void>,
+    pendingGeneration: boolean,
+}) {
+    console.log(props.topic)
+    return (
+        <div>
+            {props.topic.posts.map(post => <Post post={post}/>)}
+            <div>
+                <h2>Ajout de posts</h2>
+                <div className={style.generationSettings}>
+                    <FormGroup>
+                        <label htmlFor="postCount">Nombre de posts</label>
+                        <Slider
+                            name="postCount"
+                            value={props.settings.postCount}
+                            // onChange={(v) => props.setSettings({...props.settings, temperature: v as number})}
+                            // onChange={setGenerationPostCount}
+                            onChange={(v) => props.setSettings({...props.settings, postCount: v})}
+                            min={1}
+                            max={10}
+                            step={1}
+                        />
+                    </FormGroup>
+                </div>
+                <Button
+                    onClick={() => props.addPosts(props.topic.id, props.settings.postCount)}
+                    secondary={true}
+                    loading={props.pendingGeneration}
+                >
+                    Générer
+                </Button>
+            </div>
+            <hr/>
+        </div>
+    )
+}
+function Post(props: {
+    post: PostType
+}) {
+    return (
+        <div className={style.post}>
+            <div className={style.postHeader}>
+                <img src="https://image.jeuxvideo.com/avatar-sm/default.jpg" className={style.avatar} alt="ahi"/>
+                <div className={style.user}>{props.post.user}</div>
+                <div className={style.date}>{iso8601ToFrench(props.post.date)}</div>
+            </div>
+            <Preview raw={props.post.content}/>
+        </div>
+    )
+}

src/components/topic/style.module.scss ADDED Viewed

	@@ -0,0 +1,51 @@

+.post {
+  margin-bottom: 0.9375rem;
+  font-size: .9375rem;
+  line-height: 1.5;
+  background: var(--block-bg-color);
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  padding: 0.75rem;
+}
+.postHeader {
+  border-bottom: 0.0625rem dotted var(--border-color);
+  height: 3.625rem;
+  margin-bottom: 0.75rem;
+  display: grid;
+  grid-template-areas:
+        "avatar user"
+        "avatar date";
+  grid-template-rows: 1.5rem 1.5rem;
+  grid-template-columns: auto 1fr;
+  column-gap: .625rem;
+}
+.avatar {
+  grid-area: avatar;
+  height: 3rem;
+  width: 3rem;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.user {
+  grid-area: user;
+  font-size: 1.0625rem;
+  font-weight: 500;
+  font-family: "Roboto", Arial, Helvetica, sans-serif;
+  line-height: 1.25;
+}
+.date {
+  grid-area: date;
+  color: var(--link-color);
+  text-decoration: none;
+  font-size: .8125rem;
+}
+.generationSettings {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}

src/components/topics/index.tsx ADDED Viewed

	@@ -0,0 +1,107 @@

+import {Topic} from "../../utils/topics";
+import {Layout} from "../layout";
+import {Spinner} from "../spinner";
+import style from "./style.module.scss";
+import {Route, routes, RouteSetter} from "../../utils/route";
+import {Button} from "../button";
+import {Input} from "../input";
+import {Link, Thermometer, Sliders} from "preact-feather";
+import {Settings as SettingsType, Settings} from "../../utils/settings";
+import {useMemo, useState} from "preact/hooks";
+import {frenchToIso8601, iso8601ToFrench} from "../../utils/dates";
+import {FormGroup} from "../form";
+import {Slider} from "../slider";
+import cn from "classnames";
+export function Topics(props: {
+    topics: Topic[] | null,
+    setRoute: RouteSetter,
+    settings: Settings,
+    setSettings: (settings: SettingsType) => void,
+    generateTopic: (postCount: number) => Promise<void>,
+    pendingGeneration: boolean,
+    latestGeneratedTopicId: string|null,
+}) {
+    // const [generationPostCount, setGenerationPostCount] = useState<number>(1)
+    const sortedTopics = useMemo(() => {
+        if (props.topics === null || props.topics.length < 1) {
+            return props.topics;
+        }
+        return props.topics.sort((topicA, topicB) => {
+            if (topicA.posts.length < 1 || topicB.posts.length < 1) {
+                return 0;
+            }
+            return topicB.posts[topicB.posts.length - 1].date.localeCompare(topicA.posts[topicA.posts.length - 1].date);
+        });
+    }, [props.topics]);
+    return (
+        <div>
+            {
+                sortedTopics === null ?
+                    <Spinner className={style.spinner}/> :
+                    <List topics={sortedTopics} setRoute={props.setRoute} latestGeneratedTopicId={props.latestGeneratedTopicId}/>
+            }
+            <div>
+                <h2>Nouveau topic</h2>
+                <div className={style.generationSettings}>
+                    <FormGroup>
+                        <label for="postCount">Nombre de posts</label>
+                        <Slider
+                            name="postCount"
+                            value={props.settings.postCount}
+                            // onChange={(v) => props.setSettings({...props.settings, temperature: v as number})}
+                            // onChange={setGenerationPostCount}
+                            onChange={(v) => props.setSettings({...props.settings, postCount: v})}
+                            min={1}
+                            max={10}
+                            step={1}
+                        />
+                    </FormGroup>
+                </div>
+                <Button
+                    onClick={() => props.generateTopic(props.settings.postCount)}
+                    secondary={true}
+                    loading={props.pendingGeneration}
+                >
+                    Générer
+                </Button>
+            </div>
+            <hr/>
+        </div>
+    )
+}
+function List(props: {
+    topics: Topic[],
+    setRoute: RouteSetter,
+    latestGeneratedTopicId: string|null,
+}) {
+    return (
+        <ul className={style.list}>
+            <li className={style.head}>
+                <span>Sujet</span>
+                <span>Auteur</span>
+                <span>NB</span>
+                <span>Dernier msg</span>
+            </li>
+            {props.topics.map(topic => (
+                <li className={cn({[style.highlight]: topic.id === props.latestGeneratedTopicId})}>
+                    <span>
+                        <a href="#" onClick={(e) => {
+                            e.preventDefault();
+                            props.setRoute(routes.topic, 0, topic.id);
+                        }}>
+                            {topic.title}
+                        </a>
+                    </span>
+                    <span>{topic.posts[0].user}</span>
+                    <span>{topic.posts.length}</span>
+                    <span>{iso8601ToFrench(topic.posts[topic.posts.length - 1].date)}</span>
+                </li>
+            ))}
+        </ul>
+    )
+}

src/components/topics/style.module.scss ADDED Viewed

	@@ -0,0 +1,71 @@

+.spinner {
+  margin: 5rem auto;
+}
+.list {
+  display: grid;
+  grid-template-columns: 10fr 3fr 1fr 3fr;
+  list-style-type: none;
+  //margin: 0;
+  //margin-bottom: 1.5rem;
+  background: var(--block-bg-color);
+  border: .0625rem solid var(--border-color);
+  border-radius: 0.75rem;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+  > li {
+    display: contents;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    > span {
+      font-weight: var(--topic-font-weight);
+      font-size: var(--topic-font-size);
+      padding: var(--topic-gap);
+      a {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: var(--topic-title-lines);
+        -webkit-box-orient: vertical;
+        //margin-left: var(--topic-gap);
+        color: var(--link-color);
+        text-decoration: none;
+        font-size: var(--topic-title-font-size);
+        font-weight: var(--topic-title-font-weight);
+        &:hover {
+          color: var(--text-hover-secondary);
+        }
+      }
+    }
+    &:nth-child(even) {
+      > span {
+        background: var(--block-even-bg-color);
+      }
+    }
+    &.highlight {
+      > span {
+        background: var(--block-highlighted-bg-color);
+      }
+    }
+  }
+}
+.head {
+  > span {
+    text-transform: uppercase;
+  }
+}
+.generationSettings {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}

src/index.ts ADDED Viewed

	@@ -0,0 +1,4 @@

+import {render, h} from "preact";
+import {App} from "./app";
+render(h(App, null), document.getElementById('app'))

src/reset.scss ADDED Viewed

	@@ -0,0 +1,115 @@

+/***
+    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+ */
+*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+  all: unset;
+  display: revert;
+}
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/* Fix mobile Safari increase font-size on landscape mode */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+  cursor: revert;
+}
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu, summary {
+  list-style: none;
+}
+/* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
+ol {
+  counter-reset: revert;
+}
+/* For images to not be able to exceed their container */
+img {
+  max-inline-size: 100%;
+  max-block-size: 100%;
+}
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input, textarea {
+  -webkit-user-select: auto;
+}
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
+}
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+/* preformatted text - use only for this feature */
+:where(pre) {
+  all: revert;
+  box-sizing: border-box;
+}
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: unset;
+}
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  -webkit-user-select: auto;
+}
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
+}
+/* Revert Modal native behavior */
+//noinspection CssInvalidPseudoSelector
+:where(dialog:modal) {
+  all: revert;
+  box-sizing: border-box;
+}
+/* Remove details summary webkit styles */
+::-webkit-details-marker {
+  display: none;
+}

src/style.module.scss ADDED Viewed

	@@ -0,0 +1,13 @@

+.header {
+  background-color: var(--header-bg-color);
+  color: var(--text-color);
+}
+.logo {
+  font-size: 2rem;
+  font-weight: 700;
+}
+.main {
+}

src/styles.scss ADDED Viewed

	@@ -0,0 +1,139 @@

+@use "./reset";
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+// JVC color theme
+:root {
+  color-scheme: dark;
+  --body-bg: #22252a;
+  --text-primary: #3d87f5;
+  --text-hover-primary: #5596f6;
+  --text-secondary: #f66031;
+  --text-hover-secondary: #f7734a;
+  --text-danger: #e4606d;
+  --text-hover-danger: #dc3545;
+  --text-dark: #e0e0e0;
+  --text-hover-dark: #fff;
+  --text-light: #000;
+  --bg-color-light: #272a30;
+  --bg-color-light-transparent: rgba(39, 42, 48, 0);
+  --bg-color: #22252a;
+  --text-color: #f2f2f2;
+  --border-color: #4a4c4f;
+  --border-even-color: #454f5e;
+  --border-highlighted-color: #765d3f;
+  --block-bg-color: #2e3238;
+  --block-even-bg-color: #363e49;
+  --block-highlighted-bg-color: #594126;
+  --block-bg-color-hover: #353941;
+  --block-bg-color-hover-dark: #454b54;
+  --text-muted-color: #9e9e9e;
+  --text-muted-hover-color: #bababa;
+  --text-blockquote-color: #c7c7d1;
+  --link-color: #7dc3f7;
+  --link-hover-bg-color: #4c5767;
+  --header-bg-color: #18191b;
+  --header-bottom-bg-color: #000;
+  --header-bottom-bg-color-hover: #303236;
+  --video-footer-bg-color: #1d1e20;
+  --layout-bg-color: #292d32;
+  --disabled-bg-color: #1d1e20;
+  --disabled-text-color: #787e87;
+  --disabled-border-color: #787e87;
+  --ad-bg-color: #18191b;
+  --ad-border-color: #000;
+  --game-header-bg-color: #2c2f35;
+  --bg-light: #2c2f35;
+  --game-tab-hover-bg-color: #17191c;
+  --price-color: #9fafc6;
+  --blue-light: #414a58;
+  --live-color: #ff4d4d;
+  --live-hover-color: #ff1a1a;
+  --gauge-bg-color: #616161;
+  --blue-gray-color: #9fafc6;
+  --message-delete: #104e60;
+  --message-delete-border: #092a34;
+  --message-delete-gta: #46435b;
+  --message-delete-gta-border: #191820;
+  --input-bg-color: #303236;
+  --input-border-color: #636569;
+  --input-text-color: #f2f2f2;
+  --input-placeholder-color: #616161;
+  --form-select-indicator: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath stroke=%27%23e0e0e0%27 stroke-width=%272px%27 d=%27M2 5l6 6 6-6%27 fill=%27none%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3e%3c/svg%3e");
+  --form-switch-bg-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27><circle r=%273%27 fill=%27%23636569%27/></svg>");
+  --admin-color: #f24444;
+  --modo-color: #42b228;
+  --ad-placeholder-opacity: 0.4;
+  --alert-brightness: 0.85;
+  --filters-bg-color: #16191d;
+  --gray-100: #f8f9fa;
+  --gray-200: #e9ecef;
+  --gray-300: #dee2e6;
+  --gray-400: #ced4da;
+  --gray-500: #adb5bd;
+  --gray-600: #6c757d;
+  --gray-700: #495057;
+  --gray-800: #343a40;
+  --gray-900: #212529;
+  --white-rgb: #fff;
+  --black-rgb: #000;
+  --body-color-rgb: var(--text-color);
+  --body-bg-rgb: var(--body-bg);
+  --font-sans-serif: "Roboto", Arial, Helvetica, sans-serif;
+  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --root-font-size: 1rem;
+  --body-font-family: "Roboto", Arial, Helvetica, sans-serif;
+  --body-font-size: 0.9375rem;
+  --body-font-weight: 400;
+  --body-line-height: 1.5;
+  --body-color: var(--text-color);
+  --border-width: 0.0625rem;
+  --border-style: solid;
+  --border-color-translucent: rgba(0, 0, 0, 0.175);
+  --border-radius: 0.75rem;
+  --border-radius-sm: 0.5rem;
+  --border-radius-lg: 0.75rem;
+  --border-radius-xl: 1rem;
+  --border-radius-2xl: 2rem;
+  --border-radius-pill: 50rem;
+  --link-hover-color: var(--text-hover-secondary);
+  --code-color: #d63384;
+  --highlight-bg: #fff3cd;
+  --topic-font-size: 0.8125rem;
+  --topic-font-weight: 700;
+  --topic-line-height: 1.25;
+  --topic-gap: 0.625rem;
+  --topic-title-font-size: 0.9375rem;
+  --topic-title-font-weight: 500;
+}
+body {
+  margin: 0;
+  font-family: var(--body-font-family), sans-serif;
+  font-size: var(--body-font-size);
+  font-weight: var(--body-font-weight);
+  line-height: var(--body-line-height);
+  color: var(--body-color);
+  text-align: var(--body-text-align);
+  background-color: var(--body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+hr {
+  //height: 0.0625rem;
+  height: 1px;
+  width: 100%;
+  background-color: var(--border-color);
+  display: block;
+  margin: 1.5rem 0;
+}
+h2 {
+  font-size: 1.59375rem;
+  line-height: 1.25;
+  font-weight: 500;
+  color: var(--text-color);
+  padding-bottom: 1.5rem;
+}

src/types.d.ts ADDED Viewed

File without changes

src/utils/dates.ts ADDED Viewed

	@@ -0,0 +1,51 @@

+const iso8601ToFrenchRegex = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})/;
+export function iso8601ToFrench(iso8601: string): string {
+    console.log("iso8601ToTokens", iso8601)
+    const matches = iso8601.match(iso8601ToFrenchRegex);
+    const year = matches[1];
+    const month = months[parseInt(matches[2], 10) - 1];
+    const day = matches[3];
+    const hours = matches[4];
+    const minutes = matches[5];
+    const seconds = matches[6];
+    return `${day} ${month} ${year} à ${hours}:${minutes}:${seconds}`;
+}
+const frenchToIso8601Regex = /(\d{1,2}) ([a-zA-Z\u00C0-\u024F]+) (\d{4}) à (\d{2}):(\d{2}):(\d{2})/;
+export function frenchToIso8601(french: string): string {
+    console.log("tokensToIso8601", french)
+    // Match the components of the date and time from the input string
+    // const months = {
+    //     janvier: '01', février: '02', mars: '03', avril: '04', mai: '05',
+    //     juin: '06', juillet: '07', août: '08', septembre: '09',
+    //     octobre: '10', novembre: '11', décembre: '12'
+    // };
+    const match = french.match(frenchToIso8601Regex);
+    if (!match) {
+        throw new Error('Invalid date format');
+    }
+    const [, day, month, year, hours, minutes, seconds] = match;
+    // Convert the month name to a numeric format
+    const monthNumber = (months.indexOf(month) + 1).toString();
+    if (!monthNumber) {
+        throw new Error('Invalid month name');
+    }
+    // Construct the ISO 8601 formatted string
+    const isoDate = `${year}-${monthNumber.padStart(2, '0')}-${day.padStart(2, '0')}T${hours}:${minutes}:${seconds}`;
+    return isoDate;
+}
+const months = [
+    "janvier", "février", "mars", "avril", "mai", "juin",
+    "juillet", "août", "septembre", "octobre", "novembre", "décembre"
+];

src/utils/model.ts ADDED Viewed

	@@ -0,0 +1,107 @@

+import {Post, Topic} from "./topics";
+import {iso8601ToFrench, frenchToIso8601} from "./dates"
+import {generateUUID} from "./uuids";
+// const titleRegex = /Sujet\s+:\s+"([^"]+)"/;
+const titleRegex = /Sujet\s+:\s+"(.+?)"?<\|eot_id\|>/;
+const userRegex = /<\|im_pseudo\|>([^<]+)<\|end_pseudo\|>/;
+const dateRegex = /<\|im_date\|>([^<]+)<\|end_date\|>/;
+const contentRegex = /<\|begin_of_post\|>([\s\S]+)(?:<\|end_of_post\|>)?$/;
+export function tokensToTopic(tokens: string): Topic {
+    const topic: Topic = {
+        id: generateUUID(),
+        title: "",
+        posts: [],
+    };
+    // const splits = tokens.split("<|end_of_post|>")
+    // console.log("Splits:")
+    // console.log(splits);
+    // Split token in posts
+    // The last element is always vois, so remove it
+    for(const postTokens of tokens.split("<|end_of_post|>").slice(0, -1)) {
+        console.log("Post tokens:")
+        console.log(postTokens);
+        // If it's the first post
+        if(topic.posts.length < 1) {
+            const titleMatch = postTokens.match(titleRegex);
+            console.log(`title: ${titleMatch[1]}`)
+            topic.title = titleMatch[1];
+        }
+        // topic.posts.push(tokensToPosts());
+        topic.posts = topic.posts.concat(tokensToPosts(postTokens));
+    }
+    return topic;
+}
+export function tokensToPosts(tokens: string): Post[] {
+    const posts: Post[] = [];
+    for(const postTokens of tokens.split("<|end_of_post|>")) {
+        // TODO: remove the last instead of doing this, because the last can be incomplete
+        if(postTokens.length < 1) {
+            continue;
+        }
+        console.log("Post tokens:")
+        console.log(postTokens);
+        const userMatch = postTokens.match(userRegex);
+        console.log(`user: ${userMatch[1]}`)
+        const dateMatch = postTokens.match(dateRegex);
+        console.log(`date: ${dateMatch[1]}`)
+        const contentMatch = postTokens.match(contentRegex);
+        console.log(`content: ${contentMatch[1]}`)
+        posts.push({
+            user: userMatch[1],
+            date: frenchToIso8601(dateMatch[1]),
+            content: contentMatch[1],
+        });
+    }
+    return posts;
+}
+export function tokenizeTopic(topic: Topic): string {
+    if (topic.posts.length === 0) {
+        throw new Error("Topic must have at least one post")
+    }
+    const tokenizedPosts = topic.posts.map(post => tokenizePost(post, topic.posts[0].user)).flat().join("");
+    // console.log("Tokenized posts:")
+    // console.log(tokenizedPosts)
+    let lines = [
+        "<|start_header_id|><|sujet|><|end_header_id|>",
+        "",
+        `Sujet : "${topic.title}"`,
+    ];
+    return lines.join("\n") + tokenizedPosts;
+}
+export function tokenizePost(post: Post, poster: string): string {
+    let lines = [
+        `<|eot_id|><|start_header_id|><|${post.user === poster ? "autheur" : "khey"}|>`,
+        "<|end_header_id|>",
+        "",
+        `<|im_pseudo|>${post.user}<|end_pseudo|>`,
+        `<|im_date|>Le ${iso8601ToFrench(post.date)}<|end_date|>`,
+        "",
+        `<|begin_of_post|>${post.content}<|end_of_post|>`
+    ];
+    return lines.join("\n");
+}

src/utils/oobabooga.ts ADDED Viewed

	@@ -0,0 +1,176 @@

+import {Post, Topic} from "./topics";
+import {Settings} from "./settings";
+import {generateUUID} from "./uuids";
+import {tokenizeTopic, tokensToPosts, tokensToTopic} from "./model";
+// import {replaceSmileysInText} from "./smileys";
+//
+// try {
+//     console.log(replaceSmileysInText("lol"))
+// }catch(e) {}
+// @see https://github.com/openai/openai-node/blob/14784f95797d4d525dafecfd4ec9c7a133540da0/src/resources/chat/completions.ts
+type OobaboogaStreamChunk = {
+    id: string; // Unique identifier for the chunk
+    object: string; // The type of the chunk, e.g., "text_completion.chunk"
+    created: number; // Unix timestamp of when the chunk was created
+    model: string; // Name or identifier of the model generating the completion
+    choices: {
+        index: number; // The index of the choice in the completion
+        finish_reason: string | null; // Reason why the completion stopped, or null if still in progress
+        text: string; // The generated text for this chunk
+        logprobs: {
+            top_logprobs: Record<string, number>[]; // Log probabilities for the top tokens, as an array of key-value pairs
+        };
+    }[];
+    usage?: {
+        prompt_tokens: number; // Number of tokens in the prompt
+        completion_tokens: number; // Number of tokens generated in the completion
+        total_tokens: number; // Total tokens used
+    };
+};
+export async function generateTopic(settings: Settings, nPosts: number): Promise<Topic> {
+    console.log(settings);
+    const rawOutput = await fetApiWithStream(settings, "<|start_header_id|>", nPosts);
+    // const rawOutput = await fetApi(settings);
+    // console.log(rawOutput);
+    // let rawOutput = "rawOutput";
+    return tokensToTopic(rawOutput);
+}
+export async function generatePosts(settings: Settings, nPosts: number, topic: Topic): Promise<Post[]> {
+    // console.log(settings);
+    const rawOutput = await fetApiWithStream(settings, tokenizeTopic(topic), nPosts);
+    // const rawOutput = await fetApi(settings);
+    // console.log(rawOutput);
+    // let rawOutput = "rawOutput";
+    console.log("rawOutput");
+    console.log(rawOutput);
+    return tokensToPosts(rawOutput);
+}
+async function fetApi(settings: Settings): Promise<string> {
+    const response = await fetch(new URL("/v1/completions", settings.apiURL), {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            prompt: "<|start_header_id|>",
+            temperature: settings.temperature,
+            max_tokens: 1000,
+            stream: false,
+            skip_special_tokens: false,
+            stop: "<|end_of_post|>"
+            // top_p: 1,
+            // frequency_penalty: 0,
+            // presence_penalty: 0,
+        }),
+    });
+    if (response.status !== 200) {
+        throw new Error(`Failed to fetch API (${response.status}): ${response.statusText}`);
+    }
+    const json = await response.json();
+    console.log(json)
+    return json.choices[0].text;
+}
+const postEndToken = "<|end_of_post|>";
+// @see https://github.com/openai/openai-node/issues/18
+// nPosts: number of post before stop
+async function fetApiWithStream(settings: Settings, prompt: string, nPosts: number): Promise<string> {
+    const controller = new AbortController()
+    const response = await fetch(new URL("/v1/completions", settings.apiURL), {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            prompt,
+            temperature: settings.temperature,
+            max_tokens: 2000,
+            stream: true,
+            skip_special_tokens: false,
+            // stop: "<|end_of_post|>"
+            // top_p: 1,
+            // frequency_penalty: 0,
+            // presence_penalty: 0,
+        }),
+        signal: controller.signal,
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to fetch API (${response.status} ${response.statusText}): ${await response.text()}`);
+    }
+    // console.log("Streaming !!!!");
+    //
+    // const decoderStream = new TextDecoderStream("utf-8");
+    // const writer = new WritableStream({
+    //     write(rawChunk: string) {
+    //         // output.innerHTML += chunk;
+    //         const chunk = JSON.parse(rawChunk.trimStart().slice(6)) as OobaboogaStreamChunk; // remove "data: " and parse
+    //         console.log(chunk)
+    //     }
+    // });
+    console.log(`Fetching topic with ${nPosts} posts...`);
+    let endTokenCount = 0;
+    let tokens = ""; // Dont know why but the first token is skipped
+    let finishReason: string | null = null;
+    try {
+        await response.body.pipeThrough(new TextDecoderStream("utf-8")).pipeTo(new WritableStream({
+            write(rawChunk: string) {
+                // chunk can contains multiple lines, one chunk data per line
+                for (const rawChunkLine of rawChunk.split("\n")) {
+                    if (!rawChunkLine.startsWith("data:")) continue;
+                    const chunk = JSON.parse(rawChunkLine.slice(6)) as OobaboogaStreamChunk; // remove "data: " and parse
+                    const text = chunk.choices[0].text;
+                    console.log(text)
+                    tokens += chunk.choices[0].text;
+                    if (text.includes(postEndToken)) {
+                        endTokenCount++;
+                        if(endTokenCount >= nPosts) {
+                            finishReason = "custom_stop";
+                            controller.abort();
+                            break;
+                        }
+                    } else {
+                        finishReason = chunk.choices[0].finish_reason;
+                    }
+                }
+                // output.innerHTML += chunk;
+                // console.log("----")
+                // console.log(rawChunk)
+                // console.log(rawChunk.slice(6).trimEnd())
+                // console.log(chunk.choices[0].text)
+                // tokens += chunk.choices[0].text;
+            }
+        }));
+    } catch (e) {
+        if (e.name !== 'AbortError') {
+            throw e;
+        }
+    }
+    console.log("Done fetching data")
+    console.log(`Finish reason: ${finishReason}`)
+    console.log(`Tokens: ${tokens}`)
+    return tokens;
+}

src/utils/route.ts ADDED Viewed

	@@ -0,0 +1,9 @@

+export const routes = {
+    home: "home",
+    topic: "topic",
+    settings: "settings",
+} as const;
+export type Route = typeof routes[keyof typeof routes];
+export type RouteSetter = (route: Route, page?: number, id?: string) => void;

src/utils/settings.ts ADDED Viewed

	@@ -0,0 +1,26 @@

+const itemKey = "settings";
+export type Settings = {
+    apiURL: string;
+    temperature: number;
+    postCount: number;
+}
+const defaultSettings: Settings = {
+    apiURL: "http://localhost:8000",
+    temperature: 0.75,
+    postCount: 3,
+}
+export function fetchSettings(): Settings {
+    const storedSettings = localStorage.getItem(itemKey);
+    if (storedSettings) {
+        return {...defaultSettings, ...JSON.parse(storedSettings)} as Settings;
+    } else {
+        return defaultSettings;
+    }
+}
+export function saveSettings(settings: Settings) {
+    localStorage.setItem(itemKey, JSON.stringify(settings));
+}

src/utils/smileys.ts ADDED Viewed

	@@ -0,0 +1,79 @@

+export const smileysMap: [string, string][] = [
+    [":)", "1"], // https://image.jeuxvideo.com/smileys_img/1.gif
+    [":snif:", "20"],
+    [":gba:", "17"],
+    [":g)", "3"],
+    [":-)", "46"],
+    [":snif2:", "13"],
+    [":bravo:", "69"],
+    [":d)", "4"],
+    [":hap:", "18"],
+    [":ouch:", "22"],
+    [":pacg:", "9"],
+    [":cd:", "5"],
+    [":-)))", "23"],
+    [":ouch2:", "57"],
+    [":pacd:", "10"],
+    [":cute:", "nyu"],
+    [":content:", "24"],
+    [":p)", "7"],
+    [":-p", "31"],
+    [":noel:", "11"],
+    [":oui:", "37"],
+    [":(", "45"],
+    [":peur:", "47"],
+    [":question:", "2"],
+    [":cool:", "26"],
+    [":-(", "14"],
+    [":coeur:", "54"],
+    [":mort:", "21"],
+    [":rire:", "39"],
+    [":-((", "15"],
+    [":fou:", "50"],
+    [":sleep:", "27"],
+    [":-D", "40"],
+    [":nonnon:", "25"],
+    [":fier:", "53"],
+    [":honte:", "30"],
+    [":rire2:", "41"],
+    [":non2:", "33"],
+    [":sarcastic:", "43"],
+    [":monoeil:", "34"],
+    [":o))", "12"],
+    [":nah:", "19"],
+    [":doute:", "28"],
+    [":rouge:", "55"],
+    [":ok:", "36"],
+    [":non:", "35"],
+    [":malade:", "8"],
+    [":fete:", "66"],
+    [":sournois:", "67"],
+    [":hum:", "68"],
+    [":ange:", "60"],
+    [":diable:", "61"],
+    [":gni:", "62"],
+    [":play:", "play"],
+    [":desole:", "65"],
+    [":spoiler:", "63"],
+    [":merci:", "58"],
+    [":svp:", "59"],
+    [":sors:", "56"],
+    [":salut:", "42"],
+    [":rechercher:", "38"],
+    [":hello:", "29"],
+    [":up:", "44"],
+    [":bye:", "48"],
+    [":gne:", "51"],
+    [":lol:", "32"],
+    [":dpdr:", "49"],
+    [":dehors:", "52"],
+    [":hs:", "64"],
+    [":banzai:", "70"],
+    [":bave:", "71"],
+    [":pf:", "pf"],
+    [":cimer:", "cimer"],
+    [":ddb:", "ddb"],
+    [":pave:", "pave"],
+    [":objection:", "objection"],
+    [":siffle:", "siffle"],
+];

src/utils/topics.ts ADDED Viewed

	@@ -0,0 +1,135 @@

+export type Post = {
+    user: string;
+    date: string; // ISO 8601, YYYY-MM-DDTHH:MM:SS
+    content: string;
+}
+export type Topic = {
+    id: string; // UUID
+    title: string;
+    posts: Post[];
+}
+const itemKey = "topics";
+export function loadTopics(): Topic[] {
+    const storedTopics = localStorage.getItem(itemKey);
+    if (storedTopics) {
+        return JSON.parse(storedTopics) as Topic[];
+    } else {
+        return [];
+    }
+}
+export function saveTopics(topics: Topic[]) {
+    localStorage.setItem(itemKey, JSON.stringify(topics));
+}
+const testTopics: Topic[] = [
+    {
+        id: "dbf575b3-fc93-47b8-8773-bd91692dc97c",
+        title: "Les néerlandais font tous 2m",
+        posts: [
+            {
+                user: "elegante12",
+                date: "2025-01-15T09:13:44",
+                content: "https://vocaroo.com/1cCsqH5ai8AW\nN'allais pas ma bas si vous faites pas mini 1m80 même les meufs sont dans les 1m75 minimum"
+            },
+            {
+                user: "Pajoad",
+                date: "2025-01-15T09:14:45",
+                content: "Je suis (oui c'est on EST notre taille) 1m73 et j'ai été à Amsterdam en 2022, j'ai eu l'impression d'avoir 10 ans"
+            },
+            {
+                user: "Qui-es-tu",
+                date: "2025-01-15T09:15:13",
+                content: "Un enfer sur terre quoi."
+            },
+        ]
+    },
+    {
+        id: "0dbfad91-c5b7-4e11-a41f-eae8162ddfa5",
+        title: "C'est normal qu'une fille pète au lit ?",
+        posts: [
+            {
+                user: "Muskis",
+                date: "2025-01-15T10:47:14",
+                content: "Quand on couche avec une fille c'est normal qu'elle pète au lit avant ou après l'amour en mode balécouilles que tu sois là ?"
+            },
+            {
+                user: "edreMaLeuPcvJ-4",
+                date: "2025-01-15T10:49:45",
+                content: "Non, les filles ne pètent pas.\nSi elle pète c'est qu'elle est trans :ok:"
+            },
+            {
+                user: "PereAttali",
+                date: "2025-01-15T10:49:37",
+                content: "Quand tu lui fous dans le fion et que ta queue est trop large c'est ce qui peut arriver (lié à la dilatation rapide)"
+            },
+            {
+                user: "Pajoad",
+                date: "2025-01-15T10:56:37",
+                content: "Ça a quelle odeur d'ailleurs un pet féminin ?"
+            },
+            {
+                user: "hypertendu",
+                date: "2025-01-15T10:58:15",
+                content: "Ça peut être un pet vaginal :("
+            },
+        ]
+    },
+    {
+        id: "816dbd52-3f8e-4e44-9b8a-fcc388485e9f",
+        title: "Ta cousine veut plaquer ses FEETS sur ton visage",
+        posts: [
+            {
+                user: "BanDef411",
+                date: "2025-01-15T10:42:00",
+                content: "Es-tu préparé face a l’odeur? :("
+            },
+            {
+                user: "McLoviin",
+                date: "2025-01-15T10:43:35",
+                content: "Etant donné qu'elle me fait bander comme un taureau depuis l'adolescence je suis son tapis, son fauteuil, tout est dispo pour elle."
+            },
+        ]
+    },
+    {
+        id: "e1504b59-3918-4ee6-bced-efcd3af3f278",
+        title: "[CDD] Je BAISE ta FEMME contre REMUNERATION",
+        posts: [
+            {
+                user: "LeFeetBossV3",
+                date: "2025-01-15T11:04:30",
+                content: "Vu qu'apparement tu sais pas la satisfaire, pour 500 balles je la baise vite fait https://image.noelshack.com/minis/2018/25/2/1529422413-risitaszoom.png\n\nElle ira mieux et votre couple sera sauvé https://image.noelshack.com/minis/2018/25/2/1529422413-risitaszoom.png"
+            },
+            {
+                user: "Platitude24",
+                date: "2025-01-15T11:05:51",
+                content: "Ma femme possède un pénis féminin et elle demande si elle peut te sodomiser ?"
+            },
+        ]
+    },
+    {
+        id: "e5c288db-45a0-43e0-aa37-df485da475e7",
+        title: "La policière au gros CUL de Marseille est devenu MILLIONNAIRE",
+        posts: [
+            {
+                user: "Samanthabagare3",
+                date: "2025-01-15T11:59:32",
+                content: "https://image.noelshack.com/fichiers/2025/03/3/1736938679-screenshot-2025-01-15-11-57-10-521-com-instagram-android-edit.jpg\nhttps://image.noelshack.com/minis/2025/03/3/1736938679-screenshot-2025-01-15-11-57-10-521-com-instagram-android-edit.png\nEntrepreneuriat\" = Mym + onlyfan https://image.noelshack.com/fichiers/2018/25/2/1529422413-risitaszoom.png\n\nFrom 500 abonnés to 232 000 grâce au buzz https://image.noelshack.com/fichiers/2018/25/2/1529422413-risitaszoom.png"
+            },
+            {
+                user: "Platitude24",
+                date: "2025-01-15T11:59:36",
+                content: "Comment ça peut être policière ça ? :("
+            },
+            {
+                user: "Samanthabagare3",
+                date: "2025-01-15T12:00:02",
+                content: "> Le 15 janvier 2025 à 11:59:36 :\n> Comment ça peut être policière ça ?\n\nAHI <spoil>loool</spoil> AHI\nShitholisation du pays https://image.noelshack.com/fichiers/2018/25/2/1529422413-risitaszoom.png"
+            },
+        ]
+    },
+];

src/utils/uuids.ts ADDED Viewed

	@@ -0,0 +1,5 @@

+export function generateUUID(): string {
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+        (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+    );
+}

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,21 @@

+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"noEmit": true,
+		"allowJs": true,
+		"checkJs": true,
+		/* Preact Config */
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+		"skipLibCheck": true,
+		"paths": {
+			"react": ["./node_modules/preact/compat/"],
+			"react-dom": ["./node_modules/preact/compat/"]
+		},
+		"allowSyntheticDefaultImports": true
+	},
+	"include": ["node_modules/vite/client.d.ts", "**/*"]
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,18 @@

+import {defineConfig} from 'vite';
+// import {patchCssModules} from "vite-css-modules"
+import preact from '@preact/preset-vite';
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        // patchCssModules(),
+        preact({ // I had to disable HMR due to un Vite bug (@see https://github.com/privatenumber/vite-css-modules)
+            devToolsEnabled: false,
+            reactAliasesEnabled: false,
+            prefreshEnabled: false
+        })
+    ],
+    build: {
+        target: "es2022"
+    },
+});