Webview 2 + Html + ChatGPT !

[Antonio Linares]

generando HTML...

https://github.com/FiveTechSoft/screenshots/blob/master/buildit4.jpg?raw=true

[img width="50%"]https://github.com/FiveTechSoft/screenshots/blob/master/buildit4.jpg?raw=true[/img]

[Antonio Linares]

buildit.prg

Code: Select all  Expand view  RUN

#include "FiveWin.ch"

// get your OpenAI key from https://platform.openai.com/api-keys
static cKey := "sk-proj-..."
static oChatgpt
static oTree
static cCategory := "                              "
static oWebView

function Main()

    local oWnd, oExplBar, oAppPanel, oExplPanel

    oChatgpt = TChatgpt():New( cKey )

    DEFINE WINDOW oWnd TITLE "Build it"

    oExplBar = TExplorerBar():New( 0, 82, 480, 100, oWnd:oLeft, CLR_WHITE, RGB( 31, 31, 31 ) )
    oWnd:oLeft = oExplBar

    oExplPanel = oExplBar:AddPanel( "AI assistant" )
    oExplPanel:AddLink( "what is this app about ?",;
                        { || If( MsgGet( "App category", "Please specify it", @cCategory ), AddOptions( cCategory, oExplBar ),) } )
    oExplPanel:AddLink( "Add options to selected item", { || AddSubOptions() } )
    oExplPanel:AddLink( "Generate HTML for selected item", { || MsgRun( "Building the GUI", "Please wait", { || GenerateHTML() } ) } )

    oWnd:oClient = TPanel():New( 0, 0, 100, 100, oWnd )

    oWebView = TWebView2():New( oWnd:oClient )
    oWebView:Navigate( "https://www.google.com" )

    ACTIVATE WINDOW oWnd MAXIMIZED ;
       ON RESIZE ( oWebView:SetSize( nWidth - oExplBar:nWidth, nHeight ), oExplBar:SetSize( 480, nHeight ) )

return nil    

function AddOptions( cCategory, oExplBar )

   local cOptions, aOptions, cOption, oAppPanel, oItem

   oChatgpt:cPrompt := "genera una lista separada por comas con las opciones de una aplicación de " + AllTrim( cCategory ) + ;
                        ". No des ninguna explicación"
   oChatgpt:Send()

   cOptions = oChatgpt:GetValue( "choices", "message", "content" )
   aOptions = hb_ATokens( cOptions, "," )

   oAppPanel = oExplBar:AddPanel( cCategory,, 700 )
   oTree = TTreeView():New( 2.5, 2, oAppPanel,,,,, 423, 675 )
   oTree:bChanged = { || oItem := oTree:GetSelected(), oWebView:SetHtml( If( ! Empty( oItem:Cargo ), oItem:Cargo, "" ) ) }

   for each cOption in aOptions
      oTree:Add( cOption )
   next  
   
return nil    

function AddSubOptions()

   local oItem
   local cOption := If( ( oItem := oTree:GetSelected() ) != nil, oItem:cPrompt, "" )
   local cOptions, cSubOption, aOptions

   if ! Empty( cOption )
      oChatgpt:cPrompt := "genera una lista separada por comas con las opciones de " + cOption + ;
                          " para una aplicación de " + cCategory + ". No des ninguna explicación"
      oChatgpt:Send()

      cOptions = oChatgpt:GetValue( "choices", "message", "content" )
      aOptions = hb_ATokens( cOptions, "," )

      for each cSubOption in aOptions
        oItem:Add( cSubOption )
      next  

      oItem:Expand()
   endif  

return nil    

function GenerateHTML()

   local oItem, cHTML
   local cOption := If( ( oItem := oTree:GetSelected() ) != nil, oItem:cPrompt, "" )

   if ! Empty( cOption )
      oChatgpt:cPrompt := "genera el código HTML usando bootstrap para la opción " + cOption + ;
                          " para una aplicación de " + cCategory + ;
                          ". Que se vea muy profesional y elegante. No des ninguna explicación"
      oChatgpt:Send()

      cHTML = oChatgpt:GetValue( "choices", "message", "content" )
      oItem:Cargo = SubStr( cHTML, 8, Len( cHTML ) - 10 )
      oWebView:SetHTML( oItem:Cargo )
   endif  

return nil  

[Antonio Linares]

https://github.com/FiveTechSoft/screenshots/blob/master/buildit5.jpg?raw=true

[Antonio Linares]

buildit.prg

Code: Select all  Expand view  RUN

#include "FiveWin.ch"

// get your OpenAI key from https://platform.openai.com/api-keys
static cKey := "sk-proj-..."  
static oChatgpt
static oTree
static cCategory := "                              "
static oWebView
static cContext := "                                                                   "

function Main()

    local oWnd, oExplBar, oAppPanel, oExplPanel

    oChatgpt = TChatgpt():New( cKey )

    DEFINE WINDOW oWnd TITLE "Build it"

    oExplBar = TExplorerBar():New( 0, 82, 480, 100, oWnd:oLeft, CLR_WHITE, RGB( 31, 31, 31 ) )
    oWnd:oLeft = oExplBar

    oExplPanel = oExplBar:AddPanel( "AI assistant" )
    oExplPanel:AddLink( "what is this app about ?",;
                        { || If( MsgGet( "App category", "Please specify it", @cCategory ), AddOptions( cCategory, oExplBar ),) } )
    oExplPanel:AddLink( "Add options to selected item", { || AddSubOptions() } )
    oExplPanel:AddLink( "Generate HTML for selected item", { || MsgRun( "Building the GUI", "Please wait", { || GenerateHTML() } ) } )
    oExplPanel:AddLink( "Modify HTML for selected item" )
    oExplPanel:AddLink( "Overall context", { || Context() } )

    oWnd:oClient = TPanel():New( 0, 0, 100, 100, oWnd )

    oWebView = TWebView2():New( oWnd:oClient )
    oWebView:Navigate( "https://www.google.com" )

    ACTIVATE WINDOW oWnd MAXIMIZED ;
       ON RESIZE ( oWebView:SetSize( nWidth - oExplBar:nWidth, nHeight ), oExplBar:SetSize( 480, nHeight ) )

return nil    

function AddOptions( cCategory, oExplBar )

   local cOptions, aOptions, cOption, oAppPanel, oItem

   oChatgpt:cPrompt := "genera una lista separada por comas con las opciones de una aplicación de " + AllTrim( cCategory ) + ;
                        ". No des ninguna explicación"
   oChatgpt:Send()

   cOptions = oChatgpt:GetValue( "choices", "message", "content" )
   aOptions = hb_ATokens( cOptions, "," )

   oAppPanel = oExplBar:AddPanel( cCategory,, 700 )
   oTree = TTreeView():New( 2.5, 2, oAppPanel,,,,, 423, 675 )
   oTree:bChanged = { || oItem := oTree:GetSelected(), oWebView:SetHtml( If( ! Empty( oItem:Cargo ), oItem:Cargo, "" ) ) }

   for each cOption in aOptions
      oTree:Add( cOption )
   next  
   
return nil    

function AddSubOptions()

   local oItem
   local cOption := If( ( oItem := oTree:GetSelected() ) != nil, oItem:cPrompt, "" )
   local cOptions, cSubOption, aOptions

   if ! Empty( cOption )
      oChatgpt:cPrompt := "genera una lista separada por comas con las opciones de " + cOption + ;
                          " para una aplicación de " + cCategory + ". No des ninguna explicación"
      oChatgpt:Send()

      cOptions = oChatgpt:GetValue( "choices", "message", "content" )
      aOptions = hb_ATokens( cOptions, "," )

      for each cSubOption in aOptions
        oItem:Add( cSubOption )
      next  

      oItem:Expand()
   endif  

return nil    

function GenerateHTML()

   local oItem, cHTML
   local cOption := If( ( oItem := oTree:GetSelected() ) != nil, oItem:cPrompt, "" )

   if ! Empty( cOption )
      oChatgpt:cPrompt := "genera el código HTML usando bootstrap para la opción " + cOption + ;
                          " para una aplicación de " + cCategory + ;
                          ". Que se vea muy profesional y elegante. No des ninguna explicación. " + ;
                          cContext
      oChatgpt:Send()

      cHTML = oChatgpt:GetValue( "choices", "message", "content" )
      oItem:Cargo = SubStr( cHTML, 8, Len( cHTML ) - 10 )
      oWebView:SetHTML( oItem:Cargo )
   endif  

return nil  

function Context()

   if fw_memoEdit( @cContext, "Overall context for HTML generation" )
      cContext = AllTrim( cContext )
   endif      

return nil  

[cmsoft]

wowwwwwwww, muy bueno

[cmsoft]

Antonio, estoy intentando probar el codigo que pasaste
En principio, agregué al build.bat estas librerias:

Code: Select all  Expand view  RUN

echo %hdirl%\hbcurl.lib + >> b32.bc
echo %hdirl%\hbcurls.lib + >> b32.bc
echo %hdirl%\libcurl.lib + >> b32.bc
 

El exe se genera correctamente pero me dice que falta el archivo msvcr120.dll
El mismo lo tengo en Windows\system32
Si lo copio a la carpeta samples me dice que el sistema no ha podido iniciar correctamente y me da para cerrarla
Que puedo hacer para probarla
Estoy compilando con Borland

[Antonio Linares]

César,

Estás usando samples\buildh.bat ?

[acuellar]

Cesar

Incluir éste FLAG /NODEFAULTLIB:msvcrt

[cmsoft]

Antonio:
Estoy usasando el buildhmt.bat

Code: Select all  Expand view  RUN

@ECHO OFF
CLS
ECHO ÚÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ¿
ECHO ³ FiveWin for Harbour 22.06 - Jun. 2022           Harbour development power  ³Ü
ECHO ³ (c) FiveTech 1993-2022 for Microsoft Windows 9X/NT/200X/ME/XP/Vista/7/8/10 ³Û
ECHO ÀÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÙÛ
ECHO ÿ ßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßß

if A%1 == A GOTO :SINTAX
if NOT EXIST %1.prg GOTO :NOEXIST
set FWDIR=.\..
set HBDIR=c:\harb21
set BCDIR=c:\BCC7
rem if "%2" == "/b" set GT=gtwin
rem if not "%2" == "/b" set GT=gtgui
REM set GT=gtgui

ECHO Compiling...

set hdir=%HBDIR%
set hdirl=%hbdir%\lib
set fwh=%FWDIR%
if exist c:\bcc7 set bcdir=c:\bcc7
REM if exist c:\bcc64 set bcdir=c:\bcc64

%hdir%\bin\harbour %1 /n /i%fwh%\include;%hdir%\include /w /p  %2 %3 > comp.log 2> warnings.log
if errorlevel 1 goto COMPILEERRORS
@type comp.log
@type warnings.log

echo -O2 -e%1.exe -I%hdir%\include -I%bcdir%\include -I%bcdir%\include\windows\crtl -I%fwh%\include %1.c > b32.bc
%bcdir%\bin\bcc32 -M -c @b32.bc
:ENDCOMPILE

rem IF EXIST %1.rc %bcdir%\bin\brc32.exe -r -I%bcdir%\include -I%bcdir%\include\windows\sdk %1
IF EXIST %1.rc %bcdir%\bin\brc32 -r %1
rem IF EXIST %1.rc %bcdir%\bin\cgrc.exe -r -m -I%bcdir%\include -I%bcdir%\include\windows\sdk %1
rem IF EXIST %1.rc %vcdir%\bin\rc -r -d__FLAT__ %1

echo %bcdir%\lib\c0w32.obj + > b32.bc
echo %1.obj, + >> b32.bc
echo %1.exe, + >> b32.bc
echo %1.map, + >> b32.bc
echo %fwh%\lib\FiveH.lib %fwh%\lib\FiveHC.lib %fwh%\lib\libmysql.lib + >> b32.bc
echo %fwh%\lib\hbpgsql.lib %fwh%\lib\libpq.lib + >> b32.bc
echo %hdirl%\hbhpdf.lib + >> b32.bc
echo %hdirl%\libhpdf.lib + >> b32.bc
echo %hdirl%\png.lib + >> b32.bc
echo %hdirl%\hbwin.lib + >> b32.bc
echo %hdirl%\gtgui.lib + >> b32.bc
echo %hdirl%\hbvmmt.lib + >> b32.bc
echo %hdirl%\hbrtl.lib + >> b32.bc
echo %hdirl%\hblang.lib + >> b32.bc
echo %hdirl%\hbmacro.lib + >> b32.bc
echo %hdirl%\hbrdd.lib + >> b32.bc
echo %hdirl%\rddntx.lib + >> b32.bc
echo %hdirl%\rddcdx.lib + >> b32.bc
echo %hdirl%\rddfpt.lib + >> b32.bc
echo %hdirl%\hbsix.lib + >> b32.bc
echo %hdirl%\hbdebug.lib + >> b32.bc
echo %hdirl%\hbcommon.lib + >> b32.bc
echo %hdirl%\hbpp.lib + >> b32.bc
echo %hdirl%\hbcpage.lib + >> b32.bc
echo %hdirl%\hbcplr.lib + >> b32.bc
echo %hdirl%\hbct.lib + >> b32.bc
echo %hdirl%\hbcurl.lib + >> b32.bc
echo %hdirl%\hbcurls.lib + >> b32.bc
echo %hdirl%\libcurl.lib + >> b32.bc
echo %hdirl%\hbpcre.lib + >> b32.bc
echo %hdirl%\xhb.lib + >> b32.bc
echo %hdirl%\hbziparc.lib + >> b32.bc
echo %hdirl%\hbmzip.lib + >> b32.bc
echo %hdirl%\hbzlib.lib + >> b32.bc
echo %hdirl%\minizip.lib + >> b32.bc
rem echo %hdirl%\png.lib + >> b32.bc
echo %hdirl%\hbusrrdd.lib + >> b32.bc
echo %hdirl%\hbtip.lib + >> b32.bc
echo %hdirl%\hbzebra.lib + >> b32.bc


rem Uncomment these two lines to use Advantage RDD
rem echo %hdirl%\rddads.lib + >> b32.bc
rem echo %hdirl%\Ace32.lib + >> b32.bc

echo %fwh%\lib\dolphin.lib + >> b32.bc
rem echo %fwh%\lib\libmysql.lib + >> b32.bc

echo %bcdir%\lib\cw32.lib + >> b32.bc
echo %bcdir%\lib\uuid.lib + >> b32.bc
echo %bcdir%\lib\import32.lib + >> b32.bc
echo %bcdir%\lib\ws2_32.lib + >> b32.bc
echo %bcdir%\lib\imm32.lib + >> b32.bc
echo %bcdir%\lib\winmm.lib + >> b32.bc
echo %bcdir%\lib\psdk\odbc32.lib + >> b32.bc
echo %bcdir%\lib\psdk\nddeapi.lib + >> b32.bc
echo %bcdir%\lib\psdk\iphlpapi.lib + >> b32.bc
echo %bcdir%\lib\psdk\msimg32.lib + >> b32.bc
echo %bcdir%\lib\psdk\psapi.lib + >> b32.bc
echo %bcdir%\lib\psdk\rasapi32.lib + >> b32.bc
echo %bcdir%\lib\psdk\gdiplus.lib + >> b32.bc
echo %bcdir%\lib\psdk\Wtsapi32.lib + >> b32.bc
echo %bcdir%\lib\psdk\cw32mt.lib + >> b32.bc
echo %bcdir%\lib\psdk\uxtheme.lib + >> b32.bc
echo %bcdir%\lib\psdk\shell32.lib, >> b32.bc

IF EXIST %1.res echo %1.res >> b32.bc
rem if %GT% == gtwin %bcdir%\bin\ilink32 -Gn -Tpe -s @b32.bc
%bcdir%\bin\ilink32 -Gn -aa -Tpe -s @b32.bc
IF ERRORLEVEL 1 GOTO LINKERROR
rem if %GT% == gtgui %bcdir%\bin\ilink32 -Gn -aa -Tpe -s @b32.bc
IF ERRORLEVEL 1 GOTO LINKERROR
ECHO * Application successfully built *
rem signtool.exe sign /fd sha256 %1.exe
%1
GOTO EXIT
ECHO

rem delete temporary files
@del %1.c

:COMPILEERRORS
@type comp.log
@type warnings.log
ECHO * Compile errors *
GOTO EXIT

:LINKERROR
ECHO * Linking errors *
GOTO EXIT

:SINTAX
ECHO    SYNTAX: Build [Program]     {-- No especifiques la extensi?n PRG
ECHO                                {-- Don't specify .PRG extension
GOTO EXIT

:NOEXIST
ECHO The specified PRG %1 does not exist

:EXIT

Acuellar
Perdon mi ignorancia pero no se donde aplicarle ese FLAG

[Antonio Linares]

César,

De momento constrúyelo, por favor, usando samples\buildh.bat

[leandro]

Hola buenas noches como estan?

Intentando compilar el ejemplo, me salen los siguientes errores:

Code: Select all  Expand view  RUN

┌────────────────────────────────────────────────────────────────────────────┐
?FiveWin for xHarbour 23.10 64bits - Oct. 2023   Harbour development power  │▄
?(c) FiveTech 1993-2023 for Microsoft Windows 9X/NT/200X/ME/XP/Vista/7/8/10 │█
└────────────────────────────────────────────────────────────────────────────┘?
  ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀?
Compiling...
c:\xHar2407_64\bin\harbour leandro5 /n /d__64__ /ic:\fwh64_2407\include;c:\xHar2407_64\include /w /p
xHarbour 1.3.1 Intl. (SimpLex) (Build 20240624)
Copyright 1999-2024, http://www.xharbour.org http://www.harbour-project.org/
Compiling 'leandro5.prg' and generating preprocessed output to 'leandro5.ppo'...
Generating C source output to 'leandro5.c'...
Done.
Lines 99, Functions/Procedures 4, pCodes 423
Embarcadero C++ 7.70 for Win64 Copyright (c) 2012-2023 Embarcadero Technologies, Inc.
leandro5.c:
Turbo Incremental Link64 6.98 Copyright (c) 1997-2023 Embarcadero Technologies, Inc.
Error: Unresolved external 'HB_FUN_TCHATGPT' referenced from C:\FWH64_2407\SAMPLES\LEANDRO5.OBJ
* Linking errors *

C:\fwh64_2407\samples>


 

[Antonio Linares]

Leandro,

Añade este código al final de buildit.prg:

chatgpt.prg

Code: Select all  Expand view  RUN

#include "c:\harbour\contrib\hbcurl\hbcurl.ch"

//----------------------------------------------------------------------------//

CLASS TChatgpt

    DATA   cKey AS CHARACTER  INIT ""
    DATA   hCurl
    DATA   nHttpCode
    DATA   nError             INIT 0
 
    DATA   cResponse
    DATA   cPrompt

    DATA   cModel             INIT "gpt-4o-mini"
    DATA   cUrl               INIT "https://api.openai.com/v1/chat/completions"
 
    METHOD New( cKey )
    METHOD End()
    METHOD Send()
    METHOD Reset()
    METHOD GetValue
 
 ENDCLASS
 
//----------------------------------------------------------------------------//
 
 METHOD New( cKey ) CLASS TChatgpt

    ::cKey := cKey
    ::hCurl := curl_easy_init()
 
 return Self
 
//----------------------------------------------------------------------------//

METHOD Send() CLASS TChatgpt

    local aheaders, nHttpCode, cJson, h := { => }, hMessage := { => }
 
    curl_easy_setopt( ::hCurl, HB_CURLOPT_POST, .T. )
    curl_easy_setopt( ::hCurl, HB_CURLOPT_URL, ::cUrl )
     
    aheaders := { "Content-Type: application/json", ;
                  "Authorization: Bearer " + ::cKey }
   
    curl_easy_setopt( ::hCurl, HB_CURLOPT_HTTPHEADER, aheaders )
    curl_easy_setopt( ::hCurl, HB_CURLOPT_USERNAME, '' )
    curl_easy_setopt( ::hCurl, HB_CURLOPT_DL_BUFF_SETUP )
    curl_easy_setopt( ::hCurl, HB_CURLOPT_SSL_VERIFYPEER, .F. )

    hb_HSet( h, "model", ::cModel )
    hb_HSet( hMessage, "role", "user" )
    hb_HSet( hMessage, "content", ::cPrompt )
    h["messages"] = { hMessage }
 
    cJson = hb_jsonEncode( h )  
    curl_easy_setopt( ::hcurl, HB_CURLOPT_POSTFIELDS, cJson )
 
    ::nError = curl_easy_perform( ::hCurl )
    curl_easy_getinfo( ::hCurl, HB_CURLINFO_RESPONSE_CODE, @nHttpCode )
 
    ::nHttpCode = nHttpCode
 
    if ::nError == HB_CURLE_OK
       ::cResponse = curl_easy_dl_buff_get( ::hCurl )
    else
    endif
 
return ::cResponse            
 
//----------------------------------------------------------------------------//
 
 METHOD Reset() CLASS TChatgpt
     
    curl_easy_reset( ::hCurl )
    ::nError := HB_CURLE_OK
    ::cResponse := nil
 
 return nil
 
//----------------------------------------------------------------------------//
 
 METHOD End() CLASS TChatgpt

    curl_easy_cleanup( ::hCurl )
    ::hCurl := nil  
 
 return nil
 
//----------------------------------------------------------------------------//

METHOD GetValue() CLASS TChatgpt

   local aKeys  := hb_AParams(), cKey
   local uValue := hb_jsonDecode( ::cResponse )

   TRY
      for each cKey in aKeys
         if ValType( uValue[ cKey ] ) == "A"
            uValue = uValue[ cKey ][ 1 ]
         else    
            uValue = uValue[ cKey ]
         endif  
      next  
   CATCH
      ? ::cResponse, ::cPrompt
   END      
       
return uValue

//----------------------------------------------------------------------------//

[Antonio Linares]

En el HTML generado por la IA y visualizado en el webview observareis un fallo con los acentos.

Eso está ya solucionado y va incluido en la actualización que estamos casi a punto de publicar.

Es espectacular la IA como puede ir prototipando la aplicación y esto es solo el comienzo, se puede hacer mucho más!

Lo importante es que ya tenemos una forma para ir usándola y avanzando en esta idea

[Antonio Linares]

https://github.com/FiveTechSoft/screenshots/blob/master/buildit6.jpg?raw=true

[TOTOVIOTTI]

Antonio..
que gran trabajo... nunca dejan de sorprendernos....

estaremos esperando la actualización con los brazos abiertos.. MUCHAS GRACIAS!

Roberto