webui, fixes
This commit is contained in:
mudler
39
example/webui/actions/search.go
Normal file
39
example/webui/actions/search.go
Normal file
@@ -0,0 +1,39 @@
|
||||
package action2
|
||||
|
||||
import (
|
||||
"github.com/mudler/local-agent-framework/action"
|
||||
"github.com/sashabaranov/go-openai/jsonschema"
|
||||
)
|
||||
|
||||
// NewIntention creates a new intention action
|
||||
// The inention action is special as it tries to identify
|
||||
// a tool to use and a reasoning over to use it
|
||||
func NewSearch(s ...string) *SearchAction {
|
||||
return &SearchAction{tools: s}
|
||||
}
|
||||
|
||||
type SearchAction struct {
|
||||
tools []string
|
||||
}
|
||||
|
||||
func (a *SearchAction) Run(action.ActionParams) (string, error) {
|
||||
return "no-op", nil
|
||||
}
|
||||
|
||||
func (a *SearchAction) Definition() action.ActionDefinition {
|
||||
return action.ActionDefinition{
|
||||
Name: "intent",
|
||||
Description: "detect user intent",
|
||||
Properties: map[string]jsonschema.Definition{
|
||||
"reasoning": {
|
||||
Type: jsonschema.String,
|
||||
Description: "A detailed reasoning on why you want to call this tool.",
|
||||
},
|
||||
"tool": {
|
||||
Type: jsonschema.String,
|
||||
Enum: a.tools,
|
||||
},
|
||||
},
|
||||
Required: []string{"tool", "reasoning"},
|
||||
}
|
||||
}
|
||||
7
example/webui/elements.go
Normal file
7
example/webui/elements.go
Normal file
@@ -0,0 +1,7 @@
|
||||
package main
|
||||
|
||||
import "fmt"
|
||||
|
||||
func chatDiv(content string, color string) string {
|
||||
return fmt.Sprintf(`<div class="p-2 my-2 rounded bg-%s-100">%s</div>`, color, htmlIfy(content))
|
||||
}
|
||||
76
example/webui/index.html
Normal file
76
example/webui/index.html
Normal file
@@ -0,0 +1,76 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Smart Agent Interface</title>
|
||||
<!-- Include Tailwind CSS from CDN -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<!-- Optional: Include HTMX and SSE Extension for dynamic updates -->
|
||||
<script src="https://unpkg.com/htmx.org"></script>
|
||||
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
|
||||
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
||||
<style>
|
||||
body { overflow: hidden; }
|
||||
.chat-container { height: 100vh; display: flex; flex-direction: column; }
|
||||
.chat-messages { overflow-y: auto; flex-grow: 1; }
|
||||
.htmx-indicator{
|
||||
opacity:0;
|
||||
transition: opacity 10ms ease-in;
|
||||
}
|
||||
.htmx-request .htmx-indicator{
|
||||
opacity:1
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 p-4">
|
||||
<div class="chat-container bg-white shadow-lg rounded-lg" hx-ext="sse" sse-connect="/sse">
|
||||
<!-- Chat Header -->
|
||||
<div class="border-b border-gray-200 p-4">
|
||||
<h1 class="text-lg font-semibold">Talk to Smart Agent</h1>
|
||||
</div>
|
||||
|
||||
<!-- Chat Messages -->
|
||||
<div class="chat-messages p-4">
|
||||
<!-- Agent Status Box -->
|
||||
<div class="bg-gray-100 p-4">
|
||||
<h2 class="text-sm font-semibold">Clients:</h2>
|
||||
<div id="clients" class="text-sm text-gray-700">
|
||||
<!-- Status updates dynamically here -->
|
||||
<div sse-swap="clients" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-100 p-4">
|
||||
<h2 class="text-sm font-semibold">Status:</h2>
|
||||
<div id="hud" class="text-sm text-gray-700">
|
||||
<!-- Status updates dynamically here -->
|
||||
<div sse-swap="hud" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- https://github.com/bigskysoftware/htmx/issues/1882#issuecomment-1783463192 -->
|
||||
<div sse-swap="messages" hx-swap="beforeend" id="messages" hx-on:htmx:after-settle="document.getElementById('messages').scrollIntoView(false)"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Agent Status Box -->
|
||||
<div class="bg-gray-100 p-4">
|
||||
<h2 class="text-sm font-semibold">Agent is currently:</h2>
|
||||
<div id="agentStatus" class="text-sm text-gray-700" >
|
||||
<!-- Status updates dynamically here -->
|
||||
<div sse-swap="status" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message Input -->
|
||||
<div class="p-4 border-t border-gray-200">
|
||||
<input name="message" type="text" hx-post="/chat" hx-target="#results" hx-indicator=".htmx-indicator"
|
||||
class="p-2 border rounded w-full" placeholder="Type a message..." _="on htmx:afterRequest set my value to ''">
|
||||
<div class="my-2 htmx-indicator" >Loading...</div>
|
||||
<div id="results" class="flex justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
196
example/webui/main.go
Normal file
196
example/webui/main.go
Normal file
@@ -0,0 +1,196 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"html/template"
|
||||
"log"
|
||||
"math/rand"
|
||||
"net/http"
|
||||
"os"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
"github.com/donseba/go-htmx"
|
||||
"github.com/donseba/go-htmx/sse"
|
||||
. "github.com/mudler/local-agent-framework/agent"
|
||||
)
|
||||
|
||||
type (
|
||||
App struct {
|
||||
htmx *htmx.HTMX
|
||||
}
|
||||
)
|
||||
|
||||
var (
|
||||
sseManager sse.Manager
|
||||
)
|
||||
var testModel = os.Getenv("TEST_MODEL")
|
||||
var apiModel = os.Getenv("API_MODEL")
|
||||
|
||||
func init() {
|
||||
if testModel == "" {
|
||||
testModel = "hermes-2-pro-mistral"
|
||||
}
|
||||
if apiModel == "" {
|
||||
apiModel = "http://192.168.68.113:8080"
|
||||
}
|
||||
}
|
||||
|
||||
func htmlIfy(s string) string {
|
||||
s = strings.TrimSpace(s)
|
||||
s = strings.ReplaceAll(s, "\n", "<br>")
|
||||
return s
|
||||
}
|
||||
|
||||
var agentInstance *Agent
|
||||
|
||||
func main() {
|
||||
app := &App{
|
||||
htmx: htmx.New(),
|
||||
}
|
||||
|
||||
agent, err := New(
|
||||
WithLLMAPIURL(apiModel),
|
||||
WithModel(testModel),
|
||||
EnableHUD,
|
||||
DebugMode,
|
||||
EnableStandaloneJob,
|
||||
WithAgentReasoningCallback(func(state ActionCurrentState) bool {
|
||||
sseManager.Send(
|
||||
sse.NewMessage(
|
||||
fmt.Sprintf(`Thinking: %s`, htmlIfy(state.Reasoning)),
|
||||
).WithEvent("status"),
|
||||
)
|
||||
return true
|
||||
}),
|
||||
WithAgentResultCallback(func(state ActionState) {
|
||||
text := fmt.Sprintf(`Reasoning: %s
|
||||
Action taken: %+v
|
||||
Result: %s`, state.Reasoning, state.ActionCurrentState.Action.Definition().Name, state.Result)
|
||||
sseManager.Send(
|
||||
sse.NewMessage(
|
||||
htmlIfy(
|
||||
text,
|
||||
),
|
||||
).WithEvent("status"),
|
||||
)
|
||||
}),
|
||||
WithRandomIdentity(),
|
||||
WithPeriodicRuns("10m"),
|
||||
//WithPermanentGoal("get the weather of all the cities in italy and store the results"),
|
||||
)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
go agent.Run()
|
||||
defer agent.Stop()
|
||||
|
||||
agentInstance = agent
|
||||
sseManager = sse.NewManager(5)
|
||||
|
||||
go func() {
|
||||
for {
|
||||
clientsStr := ""
|
||||
clients := sseManager.Clients()
|
||||
for _, c := range clients {
|
||||
clientsStr += c + ", "
|
||||
}
|
||||
|
||||
time.Sleep(1 * time.Second) // Send a message every seconds
|
||||
sseManager.Send(sse.NewMessage(fmt.Sprintf("connected clients: %v", clientsStr)).WithEvent("clients"))
|
||||
}
|
||||
}()
|
||||
|
||||
go func() {
|
||||
for {
|
||||
time.Sleep(1 * time.Second) // Send a message every seconds
|
||||
sseManager.Send(sse.NewMessage(
|
||||
htmlIfy(agent.State().String()),
|
||||
).WithEvent("hud"))
|
||||
}
|
||||
}()
|
||||
|
||||
mux := http.NewServeMux()
|
||||
|
||||
mux.Handle("GET /", http.HandlerFunc(app.Home))
|
||||
|
||||
// External notifications (e.g. webhook)
|
||||
mux.Handle("POST /notify", http.HandlerFunc(app.Notify))
|
||||
|
||||
// User chat
|
||||
mux.Handle("POST /chat", http.HandlerFunc(app.Chat(sseManager)))
|
||||
|
||||
// Server Sent Events
|
||||
mux.Handle("GET /sse", http.HandlerFunc(app.SSE))
|
||||
|
||||
fmt.Print("Server started at :3210")
|
||||
err = http.ListenAndServe(":3210", mux)
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
func (a *App) Home(w http.ResponseWriter, r *http.Request) {
|
||||
tmpl, err := template.ParseFiles("index.html")
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
tmpl.Execute(w, nil)
|
||||
}
|
||||
|
||||
func (a *App) SSE(w http.ResponseWriter, r *http.Request) {
|
||||
cl := sse.NewClient(randStringRunes(10))
|
||||
|
||||
sseManager.Handle(w, r, cl)
|
||||
}
|
||||
|
||||
func (a *App) Notify(w http.ResponseWriter, r *http.Request) {
|
||||
query := strings.ToLower(r.PostFormValue("message"))
|
||||
if query == "" {
|
||||
_, _ = w.Write([]byte("Please enter a message."))
|
||||
return
|
||||
}
|
||||
|
||||
agentInstance.Ask(
|
||||
WithText(query),
|
||||
)
|
||||
_, _ = w.Write([]byte("Message sent"))
|
||||
}
|
||||
|
||||
func (a *App) Chat(m sse.Manager) func(w http.ResponseWriter, r *http.Request) {
|
||||
return func(w http.ResponseWriter, r *http.Request) {
|
||||
query := strings.ToLower(r.PostFormValue("message"))
|
||||
if query == "" {
|
||||
_, _ = w.Write([]byte("Please enter a message."))
|
||||
return
|
||||
}
|
||||
m.Send(
|
||||
sse.NewMessage(
|
||||
chatDiv(query, "blue"),
|
||||
).WithEvent("messages"))
|
||||
|
||||
go func() {
|
||||
res := agentInstance.Ask(
|
||||
WithText(query),
|
||||
)
|
||||
m.Send(
|
||||
sse.NewMessage(
|
||||
chatDiv(res.Response, "red"),
|
||||
).WithEvent("messages"))
|
||||
|
||||
}()
|
||||
|
||||
result := `<i>message received</i>`
|
||||
_, _ = w.Write([]byte(result))
|
||||
}
|
||||
}
|
||||
|
||||
var letterRunes = []rune("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ")
|
||||
|
||||
func randStringRunes(n int) string {
|
||||
b := make([]rune, n)
|
||||
for i := range b {
|
||||
b[i] = letterRunes[rand.Intn(len(letterRunes))]
|
||||
}
|
||||
return string(b)
|
||||
}
|
||||
Reference in New Issue
Block a user