ORAVOX

il doit se connecter en ssh à l'adresse locale [b]192.168.1.42[/b]

le répertoire de travail est dans [b]/var/www/html/
[/b]
utilisateur : [b]oravox[/b]
mot de passe : [b]c0ddc82e[/b]

Bonjour Xavier,
peux tu m'envoyer les codes d'accès,
et les liens. Le programmeur est arrivé ce soir, on regarde cela demain fin de journée.
Te tien au courant si il y a un problème ou des questions.
Merci
Serge

Bonjour Xavier. Message sans gpt. : j'espère que tu comprendras! . D'abord, merci pour ton rappel du système.

Très bien Xavier. Lundi nous recevons ici ton remplacent. J'espère que tu as eu ce que tu espérais.. Et que tu n'as pas de regrets. Tout ceci est fort dommage et ça me rend très triste. Mais bon, comme dis : j'ai pas le choix, et encore moins le temps de jouer. J'ai trop de responsabilités et vos amours propres sont assassins. Jeudi tu devrais être complètement libéré de tes engagements. J'espère même avant..!
Je t'avais acheté il y a 3 semaines un écran tactile rond de 5 pouces qui devrais être livrer fin du mois. J'espère qu'il te servira pour ton programme de son.. Pour un prototype et mettre en place une édition à toi.. C'est une idée..!

Ps: Remet mon Bonjour à Élise..
Dis lui que je suis désolé, que je ne voulais pas cela.
Bien a toi
Serge

Salut.

Je ne m’occuperai plus du projet Oravox, sauf pour transmettre les codes d’accès et expliquer le fonctionnement du code. Mon travail est propre, clair et robuste : il respecte des normes professionnelles et est conçu pour être simple à comprendre et à modifier.

Mon travail se compose des parties suivantes : un serveur Debian 13 hébergeant Apache et PHP‑FPM, lié via un DNS dynamique (duckdns.org) pour exposer le contenu du site situé dans /var/www/html à l’adresse oravox.dunckdns.org. Le serveur local a l’adresse [b]192.168.1.42[/b] et est accessible depuis l’extérieur via le serveur de la providence[b] 91.182.178.235[/b].

Le site est constitué de pages HTML mises en forme avec CSS et pilotées par du JavaScript qui appelle des API écrites en PHP. L’une de ces API gère une base SQLite servant de stockage des utilisateurs : identifiants, mots de passe et progression de lecture des histoires.

Un élément particulièrement travaillé est le lecteur Oravox : un élément HTML personnalisé (custom element) implémenté en JavaScript. Il charge dynamiquement les chapitres des histoires et utilise la transcription vocale pour contrôler la sélection du chapitre suivant. La transcription est réalisée avec Whisper d’OpenAI via une API PHP qui transforme la voix en texte.


Ceci est un survol rapide du projet.

Bien Xavier,
On se met d'accord que tu finis le systeme de création des histoire avec les mp3 a downloader. et c'est fini nous ne devons plus compter sur toi. ben bien compris.... Désolé d'avoir insisté ! -

- Après si tu as le temps... ou l'envie de trouvé une solution stable et adéquate pour les animes. tu es le bienvenu.
Mais c'est pas obligatoire, donc je vais prendre en charge ces fonctions et les faires rajouter par un autre programmeur. . j'ai pas le choix
- question : Ton code est t'il adapté, si un pro assume cette partie?

Bien a toi
Serge

Bonjour, aparament tu as déjà du mal à lire.. J'ai dis que nous avons un probleme de communication. Je n'ai pas, parler d'une personne en particulier. Par déduction je vois que tu veux entrer en conflit avec moi !?? Sans aucune raison.! . Que passa..? Donc dis moi si tu veux continuer sur cette vois. !?! Et comment tu vois la suite !
Si tu veux arrêter, avant le 1 octobre ?! J'ai asser de problème, pour m'occuper des tiens...

Bien a toi..
Serge

[quote]Ne pas pousser bobone dans les ortilles. 2x[/quote]

J’ai du mal à concilier le fait de dire que certaines personnes ont des problèmes de communication et d’écrire ce genre de phrase. Un conseil : utilise une intelligence artificielle pour t’aider à formuler tes messages — tu y gagneras en clarté et éviteras le ton passif‑agressif, qui devient (très) vite contre‑productif.

bonjour Xavier : tu as commencé a donner tes opinions propres n'inverse pas la situation.
je n'ai fais que répondre a tes commentaires qui n'avais aucune structure. mais pas grave....

Breff ca suffit maintenant vos gamineries... please ?! Mick, Xavier ?? please.

Nous avons un sérieux problème de communication.
Trouvez pourquoi non de dieu. essayons même si c'est difficiles de finir correctement.

Ne pas pousser bobone dans les ortilles. 2x

Xavier, J'ai besoin de te voir rapidement avec ou sans jean-yves.
Pour les layers et une mise au point cela prendra 1 ou 2 heures.

PS ; j'aurais pourtant tout essayé et mis en place pour que vous soyez tous super a l'aise et malgré cela c'est impossible.
Vos amour propres doivent toujours etre rassasier. Du coup moi aussi j'en ai mare maintenant. Bravo super les amis. merci

Solution : ou vous tirez la chasse ou cela va aller en empirant.
C'est vous qui décidez.

dis moi ca maintenant, fais les changements... comme ca on arrange ca direct

mmmmh
mmmmmmmmh





on peut considérer que ce résultat n'est pas parfait

Voici ce que j'ai sur l'écran

Ah ! Au fait ! J'ai changé tellement de truc que j'ai (forcément) retravaillé l'affichage,

aux utilisateurs de [b]smartphones[/b], dites-moi si c'est mieux centré
(rechargez la page comme des sauvages pour bien avoir la dernière version)

grands changements dans le code d'Oravox ces jours-ci

je refactorise tout le code pour qu'il soit plus simple, plus propre, et qu'il soit plus facile à adapter aux nouvelles contraintes

n'hésitez pas à tester extensivement le comportement de l'Oravox Player pour me faire remonter des remarques (claires et argumentées)

tout le labeling dans la webapp a été supprimé pour intégrer (si le temps le permet) le mécanisme futur du médaillon,
les infos liées à la transcription sont désormais visibles dans le log de la console javascript

l'authentification a été améliorée, les informations de connection en overlay ne sont pas destinées à être laissées telles quelles
mais elles aident à vérifier la cohérence de ladite authentification

je travaille également sur le mécanisme d'upload,
vous pouvez déjà tester et uploader vos photos de vacance sur le serveur,
et me faire remonter tout souci dans le mécanisme d'envoi

hihi trop bien.

je poste ici les problèmes que j'ai en ce moment, ainsi si quelqu'un a une idée

1) l'accès au serveur est lent, surtout en "cold start". il faut investiguer un peu (traceroute, mtr) pour voir ou/quoi bloque
2) le nvme a l'air mort. je l'ai lancé avec l'overlay dans /boot/firmware/config.txt et... il semble HS. à creuser, je viendrai sur place pour l'autopsie

à part ça tout roule en ce moment, c'est cool :-)

bon je vais à la pharmacie t'acheter une petite crème, car la péridural est hors de prix hehehe .. . Jai essayer et ca marche trop grave... on est bon!!!! Bravo !!!! Panoramix !

J'ai pas dormi de la nuit.
C'est pas bien.

J'ai fait le gros.
Non pas toi, Obélix.

Les difficultés sont derrières nous.
Mais créer, c'est presque accoucher.
Et accoucher ca fait mal au cul.

Je vais me reposer.

'use strict';

const TEMPLATE_URL = new URL('./oravox-player.html', import.meta.url).href;
const STYLE_URL    = new URL('./oravox-player.css',  import.meta.url).href;

export default class OravoxPlayer extends HTMLElement {
  constructor() {
    super();
    this._shadow = this.attachShadow({ mode: 'closed' });
    this.state   = { chapter: '001', currentTime: 0 };
  }

  connectedCallback() {
    const params = new URLSearchParams(window.location.search);
    this._storyId = params.get('story') || 'empty';

    Promise.all([
      fetch(TEMPLATE_URL).then(r => r.text()),
      fetch(STYLE_URL).then(r => r.text())
    ]).then(([html, css]) => {
      this._shadow.innerHTML = `<style>${css}</style>${html}`;
      this._bindElements();
      this._loadAll();
    });
  }

  _bindElements() {
    this._audio = this._shadow.querySelector('audio');
    this._cover = this._shadow.getElementById('cover');
    this._play  = this._shadow.getElementById('play');
    this._back  = this._shadow.getElementById('back');
    this._stop  = this._shadow.getElementById('stop');
    this._fill  = this._shadow.getElementById('fill');
    this._btnA  = this._shadow.getElementById('A');
    this._btnB  = this._shadow.getElementById('B');

    this._play.addEventListener('click', () => this._audio.play());
    this._stop.addEventListener('click', () => this._audio.pause());
    this._back.addEventListener('click', () => {
      this._audio.currentTime = Math.max(0, this._audio.currentTime - 5);
    });

    this._audio.addEventListener('timeupdate', () => {
      const pct = (this._audio.currentTime / this._audio.duration) * 100;
      this._fill.style.width = pct + '%';
      this.state.currentTime = this._audio.currentTime;
      this._saveState();
    });

    this._btnA.addEventListener('click', () => this.changeChapter(-1));
    this._btnB.addEventListener('click', () => this.changeChapter(+1));
  }

  _loadAll() {
    const sid = this._storyId;
    fetch(`/assets/stories/${sid}/story.json`)
      .then(r => r.json())
      .then(meta => {
        this.storyMeta = meta;
      })
      .then(() => fetch(`/api/progress.php?story=${sid}`, { credentials: 'include' }))
      .then(r => r.json())
      .then(prog => {
        Object.assign(this.state, JSON.parse(prog.state_json || '{}'));
      })
      .then(() => {
        this._loadChapter(this.state.chapter, this.state.currentTime);
      });
  }

  // TEST BUTTONS --> CHANGE CHAPTER
  changeChapter(direction) {
    const chapters = Object.keys(this.storyMeta.chapters).sort();
    const currentIndex = chapters.indexOf(this.state.chapter);
    let newIndex = currentIndex + direction;

    // LIMITS
    if (newIndex < 0) newIndex = 0;
    if (newIndex >= chapters.length) newIndex = chapters.length - 1;

    const newChapter = chapters[newIndex];
    if (newChapter && newChapter !== this.state.chapter) {
      this.state.chapter = newChapter;
      this.state.currentTime = 0;
      this._loadChapter(newChapter, 0);
      this._saveState();
    }
  }

  _loadChapter(chapterId, startTime = 0) {
    const sid = this._storyId;
    const chap = this.storyMeta.chapters[chapterId];
    this._audio.pause();
    this._audio.src = `/assets/stories/${sid}/${chap.audio}`;
    this._cover.src = `/assets/stories/${sid}/${chap.img}`;
    this._audio.currentTime = startTime;
    this._audio.play();
  }

  _saveState() {
    fetch('/api/progress.php', {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        story:      this._storyId,
        state_json: this.state
      })
    });
  }
}

customElements.define('oravox-player', OravoxPlayer);

Purée de brocoli ça marche.

Le gué est traversé, il reste plus qu'à ramasser les branches et à faire du feu.

Pour l'instant deux boutons permettent de changer de chapitre, sans aucune vérification des variables mis à part la disponibilité du fichier audio, donc ca ne fonctionne que pour Le Duel. Mais. Ca. Marche.

[url=https://oravox.duckdns.org/player.html?story=duel]Enjoy[/url]

[code]'use strict';

const TEMPLATE_URL = new URL('./oravox-player.html', import.meta.url).href;
const STYLE_URL = new URL('./oravox-player.css', import.meta.url).href;

export default class OravoxPlayer extends HTMLElement {
constructor() {
super();
this._shadow = this.attachShadow({ mode: 'closed' });
this.state = { chapter: '001', currentTime: 0 };
}

connectedCallback() {
const params = new URLSearchParams(window.location.search);
this._storyId = params.get('story') || 'empty';

Promise.all([
fetch(TEMPLATE_URL).then(r => r.text()),
fetch(STYLE_URL).then(r => r.text())
]).then(([html, css]) => {
this._shadow.innerHTML = `<style>${css}</style>${html}`;
this._bindElements();
this._loadAll();
});
}

_bindElements() {
this._audio = this._shadow.querySelector('audio');
this._cover = this._shadow.getElementById('cover');
this._play = this._shadow.getElementById('play');
this._back = this._shadow.getElementById('back');
this._stop = this._shadow.getElementById('stop');
this._fill = this._shadow.getElementById('fill');
this._btnA = this._shadow.getElementById('A');
this._btnB = this._shadow.getElementById('B');

this._play.addEventListener('click', () => this._audio.play());
this._stop.addEventListener('click', () => this._audio.pause());
this._back.addEventListener('click', () => {
this._audio.currentTime = Math.max(0, this._audio.currentTime - 5);
});

this._audio.addEventListener('timeupdate', () => {
const pct = (this._audio.currentTime / this._audio.duration) * 100;
this._fill.style.width = pct + '%';
this.state.currentTime = this._audio.currentTime;
this._saveState();
});

this._btnA.addEventListener('click', () => this.changeChapter(-1));
this._btnB.addEventListener('click', () => this.changeChapter(+1));
}

_loadAll() {
const sid = this._storyId;
fetch(`/assets/stories/${sid}/story.json`)
.then(r => r.json())
.then(meta => {
this.storyMeta = meta;
})
.then(() => fetch(`/api/progress.php?story=${sid}`, { credentials: 'include' }))
.then(r => r.json())
.then(prog => {
Object.assign(this.state, JSON.parse(prog.state_json || '{}'));
})
.then(() => {
this._loadChapter(this.state.chapter, this.state.currentTime);
});
}

// TEST BUTTONS --> CHANGE CHAPTER
changeChapter(direction) {
const chapters = Object.keys(this.storyMeta.chapters).sort();
const currentIndex = chapters.indexOf(this.state.chapter);
let newIndex = currentIndex + direction;

// LIMITS
if (newIndex < 0) newIndex = 0;
if (newIndex >= chapters.length) newIndex = chapters.length - 1;

const newChapter = chapters[newIndex];
if (newChapter && newChapter !== this.state.chapter) {
this.state.chapter = newChapter;
this.state.currentTime = 0;
this._loadChapter(newChapter, 0);
this._saveState();
}
}

_loadChapter(chapterId, startTime = 0) {
const sid = this._storyId;
const chap = this.storyMeta.chapters[chapterId];
this._audio.pause();
this._audio.src = `/assets/stories/${sid}/${chap.audio}`;
this._cover.src = `/assets/stories/${sid}/${chap.img}`;
this._audio.currentTime = startTime;
this._audio.play();
}

_saveState() {
fetch('/api/progress.php', {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
story: this._storyId,
state_json: this.state
})
});
}
}

customElements.define('oravox-player', OravoxPlayer);
[/code]

C'est très proche.

C'est très très proche.

La structure du javascript de l'oravox-player est en ébullition.
Les chapitres sont désormais intégrés au lecteur,
l'embranchement des chapitres est à un poil de couille d'être déployé.

Ca va chier des bulles trapézoïdales.

Bien... bien... extraterrestre Xavier !!
j'aime te lire.. merci pour ces retours d'avancements ... iiiiippppaaaaaa!!!!

De mon coté je peaufine les sens, et les visuels dans cette structure, pour avoir un truc parfait.
Je veux donner vie a l'oravox au propre comme au figuré. Ce fichier doit avoir un cœur, un corp, et une âme. je m'en charge.

Le mélange des deux, va être une bombe atomique et envoyer toute concurrence au moyen âge, tant techniques que ergonomiques, dans un fonds par défaut, nécessaire. Tout est lier dans ce monde ou rien n'est vrai...

L'oravox aura un style de base, une vie pixelisées, qui correspond a sa voix de robot première génération.

Dr. FRANKENSTEIN

Voici un petit thread pour faire part de l'avancement.
Quand les changements ne sont visibles qu'en interne ca peut être frustrant pour le reste de l'équipe, alors je fais un peu la liste de ce que je fais.

C'est assez technique donc ca intéressera pas grand monde à part Myq pour l'instant mais si à terme des techniciens s'ajoutent, ils verront un peu le déroulé du bousin.
La base de données a récemment été créée. Pour l'instant c'est une base [b]sqlite[/b] pilotée par [b]php[/b].
Il y a deux tables : une avec les utilisateurs et leurs mots de passe, qui sert à l'authentification,
l'autre avec la liste des combos utilisateurs/histoires et des variables associées (avancement dans l'histoire : chapitres, timestamp, choix, objets, etc...)
Ca marche bien pour mémoriser la position des audio pour les utilisateurs, mais je dois changer la structure pour prendre en compte le système d'embranchement, je ferai ça le jour où mes chakras seront bien ouverts (parce que ca demande une grosse concentration)

En attendant je renforce la structure globale
1) [b]nginx[/b] a été reconfiguré aux petits oignons et la base de donnée ne peut plus etre dumpée
2) des [b]schémas sql[/b] et un rebuilding.sh ont été créés pour reconstruire la base de données en cas de souci (j'en rêvais)
3) je fais des tests sur la disponibilité du serveur. parfois j'essaie de me connecter et le site répond pas, c'est précisément ce qu'on veut pas pour une webapp ! j'investigue du coté de duckdns, de proximus et du serveur lui-même, si vous observez des comportements étranges, faites-les moi remonter

idéalement il faudrait bien séparer le backend et le frontend avant que le projet ne prenne trop de masse mais j'ai tout fait à plat et là j'ai la flemme, je vais d'abord finaliser le protocole commun sqlite/json puis je m'attaquerai à ça. de toute facon nginx interdit l'accès à oravox.sqlite et ne rend pas les php en texte donc les fuites sont à priori minimes

j'ai mis en place [b]git[/b] pour le versionnage, je fais souvent des add & commit et un script [b]rsync[/b] me rapatrie régulièrement la dernière version du dossier .git, ainsi tout peut péter ; oravox ne va pas disparaître par un caprice technique dont l'informatique a le secret