crlf to lf

src/components/button/index.tsx

@@ -1,39 +1,39 @@
-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;
-    title?: string;
-    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}
-            title={props.title}
-        >
-            {spinner}
-            {props.children}
-        </button>
-    );
+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;
+    title?: string;
+    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}
+            title={props.title}
+        >
+            {spinner}
+            {props.children}
+        </button>
+    );
 }

src/components/button/style.module.scss

@@ -1,105 +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;
-  }
-}
-
+.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

@@ -1,10 +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>
-    );
+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

@@ -1,8 +1,8 @@
-.container {
-  margin: 0 auto;
-  //min-width: 20rem;
-  //max-width: 73.5rem;
-  padding: 0 1rem;
-
-  max-width: 800px;
+.container {
+  margin: 0 auto;
+  //min-width: 20rem;
+  //max-width: 73.5rem;
+  padding: 0 1rem;
+
+  max-width: 800px;
 }

src/components/form/index.tsx

@@ -1,12 +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>
-    )
+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

@@ -1,15 +1,15 @@
-.formGroup {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-
-  justify-content: space-between;
-  & > * {
-    flex-grow: 0;
-  }
-
-  label {
-    font-size: 1rem;
-    margin-bottom: .5rem;
-  }
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+
+  justify-content: space-between;
+  & > * {
+    flex-grow: 0;
+  }
+
+  label {
+    font-size: 1rem;
+    margin-bottom: .5rem;
+  }
 }

src/components/input/index.tsx

@@ -1,86 +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)}
-        />
-    );
+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

@@ -1,45 +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;
-  }
+.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

@@ -1,29 +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>
-    )
+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/preview/style.module.scss

@@ -1,103 +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 {
-
+.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

@@ -1,66 +1,66 @@
-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,
-    resetApp: () => 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.1}
-                    max={2}
-                    step={0.1}
-                />
-            </FormGroup>
-            <div>
-                <Button
-                    onClick={() => {
-                        props.resetApp()
-                    }}
-                    secondary={true}
-                    title="Tout réinitialiser"
-                >
-                    Réinitialiser
-                </Button>
-            </div>
-            <br/>
-            <div>
-                <Button
-                    onClick={() => {
-                        history.go(-1)
-                    }}
-                >
-                    Retour
-                </Button>
-            </div>
-        </form>
-    </div>
+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,
+    resetApp: () => 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.1}
+                    max={2}
+                    step={0.1}
+                />
+            </FormGroup>
+            <div>
+                <Button
+                    onClick={() => {
+                        props.resetApp()
+                    }}
+                    secondary={true}
+                    title="Tout réinitialiser"
+                >
+                    Réinitialiser
+                </Button>
+            </div>
+            <br/>
+            <div>
+                <Button
+                    onClick={() => {
+                        history.go(-1)
+                    }}
+                >
+                    Retour
+                </Button>
+            </div>
+        </form>
+    </div>
 }

src/components/slider/style.module.scss

@@ -1,146 +1,146 @@
-$ticks-height: 5px;
-$ticks-thickness: 1px;
-$max-ticks-allowed: 30;
-$thumb-size: 20px;
-$track-height: #{calc($thumb-size / 2)};
-
-.slider {
-  // Define css variables
-  --ticks-count: calc(var(--max) - var(--min)) / var(--step);
-  --too-many-ticks: min(1, Max(var(--ticks-count) - #{$max-ticks-allowed}, 0));
-  --x-step: max(var(--step), var(--too-many-ticks) * (var(--max) - var(--min)));
-
-  // Define properties
-  position: relative;
-
-  // Draw the steps
-  background: linear-gradient(to right, var(--text-muted-color) $ticks-thickness, transparent 1px) repeat-x;
-  background-size: calc((100% - #{$thumb-size}) / ((var(--max) - var(--min)) / var(--x-step))) #{$ticks-height};
-  background-position-x: #{calc($track-height - $ticks-thickness / 2)};
-  background-position-y: bottom;
-
-  font-weight: 700;
-  color: var(--text-muted-color);
-  font-size: 0.8125rem;
-  height: 22px;
-  margin-top: 2.5ch;
-  margin-bottom: 2.5ch;
-
-  // mix/max texts
-  &::before,
-  &::after {
-    content: counter(x);
-    position: absolute;
-    bottom: calc(-2.5ch - 2px);
-    top: calc(2.5ch + 2px);
-    opacity: .5;
-    transform: translateX(calc(50% * var(--before, -1) * -1));
-    pointer-events: none;
-  }
-
-  &::before {
-    --before: 1;
-    counter-reset: x var(--min);
-    left: #{$track-height};
-  }
-
-  &::after {
-    counter-reset: x var(--max);
-    right: #{$track-height};
-  }
-}
-
-.outputContainer {
-  position: absolute;
-  top: 0;
-  left: #{$track-height};
-  right: #{$track-height};
-  height: #{$track-height};
-  pointer-events: none;
-}
-
-.output {
-  pointer-events: none;
-  position: absolute;
-  z-index: 5;
-  width: #{$thumb-size};
-  height: #{$thumb-size};
-  left: calc((((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%) - #{calc($thumb-size / 2)});
-  bottom: #{calc($thumb-size / 2 + 6px)};
-  text-align: center;
-}
-
-
-
-.progress {
-  --completed-a: calc((clamp(var(--min), var(--value, 0), var(--max)) - var(--min)) / (var(--max) - var(--min)) * 100);
-  --completed-b: calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100);
-  --cb: max(var(--completed-a), var(--completed-b));
-  --start-end: #{$track-height};
-  --clip-end: calc(100% - (var(--cb)) * 1%);
-  --clip: inset(-20px var(--clip-end) -20px 0);
-
-  position: absolute;
-  width: 100%;
-  height: #{$track-height};
-  background: var(--text-color);
-  border-radius: #{$track-height};
-  z-index: -1;
-
-  // fill area
-  &::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    clip-path: var(--clip);
-    top: 0;
-    bottom: 0;
-    background: var(--text-secondary);
-    z-index: 1;
-    border-radius: inherit;
-  }
-}
-
-.input {
-  --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(--text-color) inset;
-
-  -webkit-appearance: none;
-  width: 100%;
-  height: #{$thumb-size};
-  margin: 0;
-  position: absolute;
-  left: 0;
-  cursor: grab;
-  outline: none;
-  background: none;
-
-  @mixin thumb {
-    appearance: none;
-    height: #{$thumb-size};
-    width: #{$thumb-size};
-    transform: translateY(-5px);
-    border-radius: 50%;
-    background: var(--text-color);
-    box-shadow: var(--thumb-shadow);
-    border: none;
-    pointer-events: auto;
-  }
-
-  &::-webkit-slider-thumb {
-    @include thumb;
-  }
-
-  &::-moz-range-thumb {
-    @include thumb;
-  }
-
-  &::-ms-thumb {
-    @include thumb;
-  }
-
-  &:active {
-    --thumb-shadow:  0 0 0 #{calc($thumb-size / 4)} inset var(--text-color), 0 0 0 99px var(--text-secondary) inset, 0 0 3px rgba(0, 0, 0, 0.4);
-    cursor: grabbing;
-  }
+$ticks-height: 5px;
+$ticks-thickness: 1px;
+$max-ticks-allowed: 30;
+$thumb-size: 20px;
+$track-height: #{calc($thumb-size / 2)};
+
+.slider {
+  // Define css variables
+  --ticks-count: calc(var(--max) - var(--min)) / var(--step);
+  --too-many-ticks: min(1, Max(var(--ticks-count) - #{$max-ticks-allowed}, 0));
+  --x-step: max(var(--step), var(--too-many-ticks) * (var(--max) - var(--min)));
+
+  // Define properties
+  position: relative;
+
+  // Draw the steps
+  background: linear-gradient(to right, var(--text-muted-color) $ticks-thickness, transparent 1px) repeat-x;
+  background-size: calc((100% - #{$thumb-size}) / ((var(--max) - var(--min)) / var(--x-step))) #{$ticks-height};
+  background-position-x: #{calc($track-height - $ticks-thickness / 2)};
+  background-position-y: bottom;
+
+  font-weight: 700;
+  color: var(--text-muted-color);
+  font-size: 0.8125rem;
+  height: 22px;
+  margin-top: 2.5ch;
+  margin-bottom: 2.5ch;
+
+  // mix/max texts
+  &::before,
+  &::after {
+    content: counter(x);
+    position: absolute;
+    bottom: calc(-2.5ch - 2px);
+    top: calc(2.5ch + 2px);
+    opacity: .5;
+    transform: translateX(calc(50% * var(--before, -1) * -1));
+    pointer-events: none;
+  }
+
+  &::before {
+    --before: 1;
+    counter-reset: x var(--min);
+    left: #{$track-height};
+  }
+
+  &::after {
+    counter-reset: x var(--max);
+    right: #{$track-height};
+  }
+}
+
+.outputContainer {
+  position: absolute;
+  top: 0;
+  left: #{$track-height};
+  right: #{$track-height};
+  height: #{$track-height};
+  pointer-events: none;
+}
+
+.output {
+  pointer-events: none;
+  position: absolute;
+  z-index: 5;
+  width: #{$thumb-size};
+  height: #{$thumb-size};
+  left: calc((((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%) - #{calc($thumb-size / 2)});
+  bottom: #{calc($thumb-size / 2 + 6px)};
+  text-align: center;
+}
+
+
+
+.progress {
+  --completed-a: calc((clamp(var(--min), var(--value, 0), var(--max)) - var(--min)) / (var(--max) - var(--min)) * 100);
+  --completed-b: calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100);
+  --cb: max(var(--completed-a), var(--completed-b));
+  --start-end: #{$track-height};
+  --clip-end: calc(100% - (var(--cb)) * 1%);
+  --clip: inset(-20px var(--clip-end) -20px 0);
+
+  position: absolute;
+  width: 100%;
+  height: #{$track-height};
+  background: var(--text-color);
+  border-radius: #{$track-height};
+  z-index: -1;
+
+  // fill area
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    clip-path: var(--clip);
+    top: 0;
+    bottom: 0;
+    background: var(--text-secondary);
+    z-index: 1;
+    border-radius: inherit;
+  }
+}
+
+.input {
+  --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(--text-color) inset;
+
+  -webkit-appearance: none;
+  width: 100%;
+  height: #{$thumb-size};
+  margin: 0;
+  position: absolute;
+  left: 0;
+  cursor: grab;
+  outline: none;
+  background: none;
+
+  @mixin thumb {
+    appearance: none;
+    height: #{$thumb-size};
+    width: #{$thumb-size};
+    transform: translateY(-5px);
+    border-radius: 50%;
+    background: var(--text-color);
+    box-shadow: var(--thumb-shadow);
+    border: none;
+    pointer-events: auto;
+  }
+
+  &::-webkit-slider-thumb {
+    @include thumb;
+  }
+
+  &::-moz-range-thumb {
+    @include thumb;
+  }
+
+  &::-ms-thumb {
+    @include thumb;
+  }
+
+  &:active {
+    --thumb-shadow:  0 0 0 #{calc($thumb-size / 4)} inset var(--text-color), 0 0 0 99px var(--text-secondary) inset, 0 0 3px rgba(0, 0, 0, 0.4);
+    cursor: grabbing;
+  }
 }

src/components/spinner/index.tsx

@@ -1,12 +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>
-    )
+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

@@ -1,46 +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);
-  }
+.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/style.module.scss

@@ -1,51 +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;
+.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/style.module.scss

@@ -1,77 +1,77 @@
-.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 {
-  max-width: 400px;
-  //display: grid;
-  //grid-template-columns: 1fr 0;
-  //
-  //
-  //@media screen and (min-width: 600px) {
-  //  grid-template-columns: 1fr 1fr;
-  //}
+.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 {
+  max-width: 400px;
+  //display: grid;
+  //grid-template-columns: 1fr 0;
+  //
+  //
+  //@media screen and (min-width: 600px) {
+  //  grid-template-columns: 1fr 1fr;
+  //}
 }

src/index.ts

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

src/reset.scss

@@ -1,115 +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;
+/***
+    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

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

src/styles.scss

@@ -1,139 +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;
+@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/utils/dates.ts

@@ -1,51 +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"
+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

@@ -1,107 +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");
+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/route.ts

@@ -1,9 +1,9 @@
-export const routes = {
-    home: "home",
-    topic: "topic",
-    settings: "settings",
-} as const;
-
-export type Route = typeof routes[keyof typeof routes];
-
+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

@@ -1,30 +1,30 @@
-const itemKey = "settings";
-
-export type Settings = {
-    apiURL: string;
-    temperature: number;
-    postCount: number;
-}
-
-const defaultSettings: Settings = {
-    apiURL: "http://localhost:5000",
-    temperature: 0.9,
-    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));
-}
-
-export function resetSettings() {
-    localStorage.removeItem(itemKey);
+const itemKey = "settings";
+
+export type Settings = {
+    apiURL: string;
+    temperature: number;
+    postCount: number;
+}
+
+const defaultSettings: Settings = {
+    apiURL: "http://localhost:5000",
+    temperature: 0.9,
+    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));
+}
+
+export function resetSettings() {
+    localStorage.removeItem(itemKey);
 }

src/utils/smileys.ts

@@ -1,79 +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"],
+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

@@ -1,135 +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"
-            },
-        ]
-    },
+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

@@ -1,5 +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)
-    );
+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)
+    );
 }