Dans les interfaces modernes de chat IA, le texte apparaît progressivement, caractère par caractère, simulant une saisie en temps réel. Cet article explique comment reproduire cet effet dans une application de bureau Delphi basée sur VCL à l'aide du composant TEdgeBrowser.
Configuration de TEdgeBrowser
Pour utiliser TEdgeBrowser, assurez-vous que le fichier WebView2Loader.dll se trouve dans le même répertoire que l'exécutable de votre programme. Ensuite, initialisez le composant en appelant la méthode CreateWebView dans l'événement OnCreate du formulaire :
procedure TFormPrincipal.FormCreate(Sender: TObject);
begin
BrowserPrincipal.CreateWebView;
end;
Chargement du contenu
TEdgeBrowser permet de charger du contenu depuis diverses sources :
- Depuis un serveur web :
BrowserPrincipal.Navigate('https://exemple.com'); - Depuis un fichier local :
BrowserPrincipal.Navigate(ExtractFilePath(ParamStr(0)) + 'page.html'); - Directement via une chaîne HTML avec
NavigateToString, mais notez que cette méthode ne prend pas en charge le formatage HTML complexe.
Ajout dynamique de texte avec JavaScript
Pour permetre l'ajout incrémental de texte, créez un fichier HTML contenent une fonction JavaScript. Voici un exemple modifié :
<html>
<head>
<title>Affichage dynamique</title>
<script>
function insererContenu(texte) {
var element = document.getElementById('zoneTexte');
element.innerHTML += texte;
window.scrollTo(0, document.body.scrollHeight);
}
</script>
</head>
<body style="font-family: Arial, sans-serif; font-size: 16px;">
<div id="zoneTexte">Démarrage : </div>
</body>
</html>
Cette définition inclut un élément div avec l'identifiant zoneTexte et une fonction insererContenu qui ajoute du texte et fait défiler la page.
Appel depuis Delphi
Utilisez la méthode ExecuteScript de TEdgeBrowser pour invoquer la fonction JavaScript :
procedure TFormPrincipal.BoutonAjouterClick(Sender: TObject);
var
script: string;
begin
script := Format('insererContenu("%s");', [ChampSaisie.Text]);
BrowserPrincipal.ExecuteScript(script);
end;
Méthode alternative simplifiée
Pour éviter de charger un fichier HTML préconfiguré, modifiez directement le contenu du corps de la page via JavaScript :
procedure TFormPrincipal.BoutonSimpleClick(Sender: TObject);
begin
BrowserPrincipal.ExecuteScript(
'document.body.innerHTML += "' + ChampSaisie.Text + '";'
);
end;
Cette approche contourne la nécessité d'un modèle HTML initial mais offre moins de contrôle sur la structure du document.