2007 Interactions audio sur le site web du LIA Documentation Technique Projet 13 - IUP Avignon Master1 TAIM 28/05/2007
2 Projet 13 : Interactions audio sur le site web du LIA Sommaire Composants de l'application... 3 Modèle... 3 Vue... 6 Contrôleur... 6 Mise en place pas à pas... 7 Mise en place côté serveur... 7 Mise en place du serveur Apache... 7 Mise en place du script PHP... 7 Mise en place du serveur SPEERAL... 7 Mise en place du Dispatcher... 7 Mise en place "côté client"... 7 Applet... 7 Page HTML... 7 Configuration spécifique à l'applet par la classe Configuration... 8 Java Web Start... 8 Interface graphique... 8 Modification des méthodes de la classe Interface... 8 Paramétrage... 9 Mise en place de l'applet ou de l'application Java Web Start sur le serveur Apache... 9 Applet... 9 Java Web Start... 9
3 Projet 13 : Interactions audio sur le site web du LIA Composants de l'application Le projet respecte l'architecture modèle-vue-contrôleur (motif de conception qui sépare le modèle de données, l'interface utilisateur et la logique de contrôle). Modèle Le modèle est composé de 4 parties distinctes : Figure 1 Architecture Modèle Vue Contrôleur 1. une partie qui acquiert du son via un microphone, l'envoie vers un serveur Apache et l'interroge régulièrement pour savoir si le résultat est disponible. Cette partie est codée entièrement en Java 2. un script qui permet de copier les fichiers audio récupérés par Apache d'un répertoire temporaire vers un autre répertoire. Ce script est codé en PHP 3. un dispatcher qui a pour rôle d'envoyer les fichiers audio une fois stockés le serveur vers un serveur SPEERAL. Ce dispatcher est codé en Java 4. un serveur SPEERAL qui a pour rôle de transcrire des fichiers audio. Le résultat de la transcription est stocké sous forme de fichier texte
4 Projet 13 : Interactions audio sur le site web du LIA Composition des différentes parties : Partie 1 BlocAudio Fichier source : BlocAudio.java Rôle : le son numérisé est capturé et découpé en blocs de taille fixe pour analyse (silence) et envoyé sur la sortie HTTP ClientHTTPd1MonoTranscripteur Fichier source : ClientHTTPd1MonoTranscripteur.java Rôle : encapsule une session de transcription Parametrage Fichier source : Parametrage.java Rôle : permet de paramétrer l'application Session Fichier source : Session.java Rôle : une session de transcription correspond à un certain nombre de séquences audio à transcrire, une session possède un identifiant SequenceAudio Fichier source : SequenceAudio.java Rôle : c'est un ensemble de blocs audio, sa fin est déterminée par une durée de silence donnée, c'est cette séquence audio dont on demande une transcription, chaque séquence a un numéro SortieHTTP Fichier source : SortieHTTP.java Rôle : permet d'injecter le flux audio au sein d'une requête HTTP POST TClient Fichier source : TClient.java Rôle : cette classe est un thread qui permet de démarrer une transcription en créant une instance de ClientHTTPd1MonoTranscripteur. Le fait qu'elle soit un thread lui permet de recevoir des évènements du contrôleur (arrêter la transcription par exemple) pendant qu'une transcription est en cours Transcriptions Fichier source : Transcriptions.java Rôle : correspond à l'ensemble des transcriptions déjà effectuées et essaie de lire la suivante Contrôle Qualité : Une analyse statique du code de cette partie a été réalisée à l'aide du logiciel Logiscope de Telelogic, aucun défaut majeur n'a été relevé :
5 Projet 13 : Interactions audio sur le site web du LIA Figure 2 - Graphe de contrôle de la méthode qui enregistre du son et lit la transcription texte Figure 3 - Métriques - graphe de Kiviat
6 Projet 13 : Interactions audio sur le site web du LIA Vue Partie 2 Script PHP Fichier source : EnregistreSequence.php Rôle : ce script permet de copier les fichiers nouvellement chargés sur le serveur Apache d'un répertoire temporaire vers un répertoire définitif Partie 3 Dispatcher Fichier source : Dispatcher.java Rôle : le dispatcher scrute sans arrêt le répertoire qui contient les fichiers audio nouvellement chargés sur le serveur Apache. Quand un fichier est détecté, le dispatcher l'envoie vers le serveur SPEERAL grâce à la technologie CORBA, puis le supprime. Il crée le fichier texte correspondant à la transcription sur le serveur Apache. Partie 4 Serveur SPEERAL Rôle : le serveur SPEERAL transcrit un fichier audio en fichier texte Nous avons réalisé deux vues différentes pour ce projet 1. une page HTML avec deux déclinaisons a. une version qui affiche une transcription texte b. une version de type commande vocale sur un objet de la page HTML (direction, changement de couleur, de taille... par la voix) 2. une interface graphique en Java Contrôleur Page HTML Source : index.html, scripts.js, styles.css Rôle : cette page permet à l'utilisateur de démarrer une transcription, de l'arrêter et de consulter le résultat Interface graphique en Java Source : IGraphique.java Rôle : cette interface graphique permet à l'utilisateur de démarrer une transcription et de l'arrêter à la manière de magnétophone (appuyer sur un bouton pour démarrer, le relâcher pour arrêter). Le résultat de la transcription est affiché dans une zone de texte éditable, permettant les copier-coller Le contrôleur fait l'interface entre la vue et le modèle. Malheureusement il est nécessaire de modifier le contrôleur suivant si la solution déployée sera sous forme d'applet ou d'application Java Web Start. Ceci est dû au fait que pour interagir avec le JavaScript (donc si c'est une applet), la classe du contrôleur doit dériver de Applet et dois instancier un objet spécial permettant l'interaction, ce qui n'est pas le cas lorsqu'il s'agit d'une application Java Web Start
7 Projet 13 : Interactions audio sur le site web du LIA Contrôleur Source : Interface.java Rôle : Permet de traiter les évènements de la vue (démarrer ou arrêter la transcription) et du modèle Mise en place pas à pas Mise en place côté serveur Mise en place du serveur Apache L'installation d'un serveur Apache est nécessaire pour réceptionner les fichiers audio envoyés par le client et pour héberger les pages qui contiendront l'applet ou l'application Java Web Start. Apache ne nécessite pas de configuration particulière. Mise en place du script PHP Le script peut être placé n'importe où sur le serveur. Mise en place du serveur SPEERAL L'installation de SPEERAL ne nécessite rien de particulier. Mise en place du Dispatcher Mise en place "côté client" Applet Page HTML L'application peut être intégrée facilement dans une page HTML déjà existante. Quelques opérations sont toutefois nécessaires : (obligatoire) créer une div en lui spécifiant un id qui contiendra le résultat de la transcription (facultatif) créer une div en lui spécifiant un id qui contiendra les informations de debugage (facultatif) créer une div en lui spécifiant un id qui contiendra l'activité du microphone (facultatif) créer une div en lui spécifiant un id qui contiendra l'action en cours insérer l'applet de cette manière : <applet archive="nomarchive.jar" code="interface.class" name="nomapplet" width="0" height="0" mayscript></applet> Le paramètre mayscript est indispensable pour permettre la communication entre Java et Javascript.
8 Projet 13 : Interactions audio sur le site web du LIA créer des éléments HTML (boutons ou autres) permettant de lancer la transcription et de l'arrêter. Ajouter à ces éléments le paramètre onclick de la manière suivante : - Démarrer la transcription <input type="button" onclick="nomapplet.demarre();" /> - Arrêter la transcription <input type="button" onclick="nomapplet.arrete();" /> Configuration spécifique à l'applet par la classe Configuration 1. urlsortie (obligatoire) doit contenir l'adresse du fichier EnregistreSequence.php 2. urlentree (obligatoire) doit contenir l'adresse du dossier sur le serveur qui contient les fichiers texte résultat de la transcription 3. divresu (obligatoire) doit contenir l'id de la div de la page HTML qui affichera le résultat de la transcription 4. divdebug (facultatif) doit contenir l'id de la div de la page HTML qui affichera des informations de debugage 5. divniveau (facultatif) doit contenir l'id de la div de la page HTML qui affichera l'activité du microphone 6. divaction (facultatif) doit contenir l'id de la div de la page HTML qui affichera l'action en cours Java Web Start Interface graphique Il est nécessaire de créer des fonctions qui appelleront les méthodes Interface.demarre() et Interface.arrete() (par exemple lors de clic sur un bouton). Il est également nécessaire d'implémenter des méthodes : setresu(string str) : méthode qui sera appelée par le contrôleur pour afficher le résultat de la transcription setdebug(string str) : méthode qui sera appelée par le contrôleur pour afficher les informations de debugage (laisser vide si non utilisée) setaction(string str) : méthode qui sera appelée par le contrôleur pour afficher l'action en cours (laisser vide si non utilisée) setniveau(int n) : méthode qui sera appelée par le contrôleur pour afficher l'activité du microphone (laisser vide si non utilisée) Modification des méthodes de la classe Interface public static void resultat(string str) : appelle setresu(str) de l'objet IGraphique public static void debug(string str) : appelle setdebug de l'objet IGraphique (laisser vide si non utilisée) public static void action(string str) : laisser vide si non utilisée public static void niveau(int n) : laisser vide si non utilisée
9 Projet 13 : Interactions audio sur le site web du LIA Paramétrage Le paramétrage se fait via la classe Parametrage. Paramétrage commun à l'applet et à l'application Java Web Start : 1. formataudio : Format audio de l'encodage 2. tailleblocaudio : taille du bloc audio en nombre d'octets 3. nombreiterationspourcalibrationsilence : nombre de blocs audio utilisé 4. dureesilencepourfinsequence : en nombre d'échantillons 5. dureesilencepourfinsession : en nombre d'échantillons 6. nombremaximaldesequence 7. tempolecturedestranscriptions : en nombre de blocs audio 8. urlsortie : adresse internet du fichier EnregistreSequence.php 9. urlentree : adresse internet du répertoire qui contient les fichiers texte de résultat de la transcription Mise en place de l'applet ou de l'application Java Web Start sur le serveur Apache Applet Nous pouvons maintenant créer l'archive de l'applet et copier les fichiers nécessaires sur le serveur 1. compiler tous les.java (ne pas oublier d'inclure le fichier jaws.jar qui permet la communication entre Javascript et Java : >javac -classpath.\jaws.jar *.java 2. créer une archive jar avec les fichiers.class générés : >jar cvf nomarchive.jar *.class jaws.jar 3. obtenir ou créer un certificat 4. signer l'archive avec ce certificat : >jarsigner -verbose nomarchive.jar nomcertificat 5. copier le fichier HTML et tous les fichiers attachés ainsi que l'archive sur le serveur Attention : si le certificat n'est pas reconnu par un organisme spécialisé, il sera alors impossible d'utiliser le microphone et d'envoyer des fichiers vers le serveur pour des raisons de sécurité. Il est alors nécessaire de placer un fichier nommé.java.policy dans un répertoire présent dans le CLASSPATH. Voici la structure d'un tel fichier, donnant toutes les autorisations : grant { permission java.security.allpermission; }; Java Web Start Nous pouvons maintenant créer l'archive de l'applet et copier les fichiers nécessaires sur le serveur 1. compiler tous les.java : >javac -classpath.\jaws.jar *.java 2. créer une archive jar avec les fichiers.class générés : >jar cvf nomarchive.jar *.class jaws.jar
10 Projet 13 : Interactions audio sur le site web du LIA 3. obtenir ou créer un certificat 4. signer l'archive avec ce certificat : >jarsigner -verbose nomarchive.jar nomcertificat 5. créer un fichier de déploiement, par exemple deploy.jnlp dont voici la structure : <?xml version="1.0" encoding="utf-8"?> <jnlp codebase="http://repertoire-contenant-le-fichier-jnlp"> <information> <title>titre de l'application</title> <vendor>auteur</vendor> <description>description de l'application</description> <offline-allowed/> </information> <security> <all-permissions/> </security> <resources> <j2se version="1.4+"/> <jar href="nomarchive.jar"/> </resources> <application-desc main-class="interface"/> </jnlp> Nous pouvons maintenant mettre sur le serveur tous ses fichiers, et créer une page internet qui contiendra un lien vers le fichier.jnlp.