Re: Webview 2 + Html + ChatGPT !
Posted: Thu Sep 26, 2024 11:41 am
Esta nueva versión ya permite pedirle modificaciones sobre un HTML generado anteriormente, pudiendo especificar todo tipo de detalles
Se reutiliza el HTML existente, asi se puede ir afinando según lo que necesitemos.
buildit.prg
Se reutiliza el HTML existente, asi se puede ir afinando según lo que necesitemos.
buildit.prg
Code: Select all | Expand
#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", { || ModifyHTML() } )
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 " + ;
hb_Utf8ToStr( AllTrim( cCategory ) ) + ". No des ninguna explicación"
oChatgpt:Send()
cOptions = oChatgpt:GetValue( "choices", "message", "content" )
aOptions = hb_ATokens( cOptions, "," )
oAppPanel = oExplBar:AddPanel( cCategory,, 700 )
cCategory = hb_Utf8ToStr( AllTrim( cCategory ) )
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 " + hb_StrToUtf8( 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 " + hb_StrToUtf8( cOption ) + ;
" para una aplicación de " + hb_StrToUtf8( AllTrim( 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 ModifyHTML()
local oItem, cHTML
local cOption := If( ( oItem := oTree:GetSelected() ) != nil, oItem:cPrompt, "" )
local cChange := Space( 50 )
if fw_memoEdit( @cChange, "What do you want to change ?" )
cChange = AllTrim( cChange )
endif
if ! Empty( cOption )
oChatgpt:cPrompt := "modifica este código HTML usando bootstrap para la opción " + hb_StrToUtf8( cOption ) + ;
" para una aplicación de " + hb_StrToUtf8( AllTrim( cCategory ) ) + ;
". Que se vea muy profesional y elegante. No des ninguna explicación. " + ;
cContext + ". Y aplica _ exactamente: " + hb_StrToUtf8( cChange ) + ;
oItem:Cargo
MsgRun( "Asking ChatGPT", "Please wait", { || 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
//----------------------------------------------------------------------------//