Merge pull request #5 from So-Sahari/feature/add-markdown-parser

feat: add markdown parser

app/run.go

@@ -6,10 +6,10 @@ import (
 	"html/template"
 	"log"
 	"net/http"
-	"strings"
 
 	"jenn-ai/internal/bedrock"
 	"jenn-ai/internal/ollama"
+	"jenn-ai/internal/parser"
 
 	"github.com/gin-gonic/gin"
 )
@@ -32,13 +32,15 @@ func (mc *ModelConfig) runModel(ctx context.Context, region string) gin.HandlerF
 			}
 			completion = input + response
 
-			processPrompt := strings.ReplaceAll(message, "\n", "<br>")
-			processPrompt = strings.ReplaceAll(processPrompt, "    ", `<span class="tab-space"></span>`)
-			processResponse := strings.ReplaceAll(response, "\n", "<br>")
-			processResponse = strings.ReplaceAll(processResponse, "    ", `<span class="tab-space"></span>`)
+			// parse markdown
+			parsed, err := parser.ParseMD(response)
+			if err != nil {
+				log.Fatal(err)
+			}
+
 			c.HTML(http.StatusOK, "chat.html", gin.H{
-				"Human":    template.HTML("<b>You:</b><br>" + processPrompt),
-				"Response": template.HTML("<b>JennAI:</b><br>" + processResponse),
+				"Human":    template.HTML("<b>You:</b><br>" + message),
+				"Response": template.HTML("<b>JennAI:</b><br>" + parsed),
 			})
 		case "Ollama":
 			model := ollama.NewModel(modelID, mc.Temperature, mc.TopP, mc.TopK, mc.MaxTokens)
@@ -49,13 +51,15 @@ func (mc *ModelConfig) runModel(ctx context.Context, region string) gin.HandlerF
 			}
 			completion = input + response
 
-			processPrompt := strings.ReplaceAll(message, "\n", "<br>")
-			processPrompt = strings.ReplaceAll(processPrompt, "    ", `<span class="tab-space"></span>`)
-			processResponse := strings.ReplaceAll(response, "\n", "<br>")
-			processResponse = strings.ReplaceAll(processResponse, "    ", `<span class="tab-space"></span>`)
+			// parse markdown
+			parsed, err := parser.ParseMD(response)
+			if err != nil {
+				log.Fatal(err)
+			}
+
 			c.HTML(http.StatusOK, "chat.html", gin.H{
-				"Human":    template.HTML("<b>You:</b><br>" + processPrompt),
-				"Response": template.HTML("<b>JennAI:</b><br>" + processResponse),
+				"Human":    template.HTML("<b>You:</b><br>" + message),
+				"Response": template.HTML("<b>JennAI:</b><br>" + parsed),
 			})
 		default:
 			fmt.Println("No Model Platform selected or unsupported")

go.mod

@@ -50,6 +50,7 @@ require (
 	github.com/spf13/pflag v1.0.5 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.11 // indirect
+	github.com/yuin/goldmark v1.7.4 // indirect
 	golang.org/x/arch v0.3.0 // indirect
 	golang.org/x/crypto v0.17.0 // indirect
 	golang.org/x/net v0.19.0 // indirect

go.sum

@@ -123,6 +123,8 @@ github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2
 github.com/ugorji/go/codec v1.2.11 h1:BMaWp1Bb6fHwEtbplGBGJ498wD+LKlNSl25MjdZY4dU=
 github.com/ugorji/go/codec v1.2.11/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
+github.com/yuin/goldmark v1.7.4 h1:BDXOHExt+A7gwPCJgPIIq7ENvceR7we7rOS9TNoLZeg=
+github.com/yuin/goldmark v1.7.4/go.mod h1:uzxRWxtg69N339t3louHJ7+O03ezfj6PlliRlaOzY1E=
 golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
 golang.org/x/arch v0.3.0 h1:02VY4/ZcO/gBOH6PUaoiptASxtXU10jazRCP865E97k=
 golang.org/x/arch v0.3.0/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=

internal/parser/markdown.go

@@ -0,0 +1,17 @@
+package parser
+
+import (
+	"bytes"
+
+	"github.com/yuin/goldmark"
+)
+
+// ParseMD is used to parse markdown
+func ParseMD(source string) (string, error) {
+	var buf bytes.Buffer
+	md := goldmark.New()
+	if err := md.Convert([]byte(source), &buf); err != nil {
+		return "", err
+	}
+	return buf.String(), nil
+}

templates/index.html

@@ -30,12 +30,19 @@
       </div>
     </div>
 
-    <div class="pl-40 pr-40 mb-20">
+    <div id="htmlOutput" class="pl-40 pr-40 mb-20">
       {{template "chat.html" .}}
     </div>
-    <div class="pl-40 pr-40">
-      {{template "prompt.html" .}}
-    </div>
+    <script>
+      document.addEventListener('htmx:afterSwap', function(evt) {
+        if (evt.detail.target.id === 'htmlOutput') {
+            evt.detail.target.scrollIntoView(false); // Scroll to the bottom of the element
+        }
+      });
+    </script>
   </body>
+  <div class="pl-40 pr-40">
+    {{template "prompt.html" .}}
+  </div>
 </html>
 {{end}}