matthoffner commited on
Commit
e3277b6
1 Parent(s): d3138f0

experiment with web-components markdown

Browse files
Files changed (1) hide show
  1. main.py +37 -12
main.py CHANGED
@@ -1,15 +1,11 @@
1
  import fastapi
2
- import json
3
  import markdown
4
  import uvicorn
5
  from ctransformers import AutoModelForCausalLM
6
  from fastapi.responses import HTMLResponse
7
  from fastapi.middleware.cors import CORSMiddleware
8
  from sse_starlette.sse import EventSourceResponse
9
- from ctransformers.langchain import CTransformers
10
- from pydantic import BaseModel, Field
11
- from typing import List, Any
12
- from typing_extensions import TypedDict, Literal
13
 
14
  llm = AutoModelForCausalLM.from_pretrained("NeoDim/starchat-alpha-GGML",
15
  model_file="starchat-alpha-ggml-q4_0.bin",
@@ -41,16 +37,22 @@ async def demo():
41
  <!DOCTYPE html>
42
  <html>
43
  <head>
44
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
45
  </head>
46
  <body>
47
  <style>
 
 
 
48
  code {
49
- display: inline-block;
50
- background-color: lightgray;
 
 
 
 
51
  }
52
  #content {
53
- font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace !important;
54
  box-sizing: border-box;
55
  min-width: 200px;
56
  max-width: 980px;
@@ -58,19 +60,42 @@ async def demo():
58
  padding: 45px;
59
  font-size: 16px;
60
  }
61
-
62
  @media (max-width: 767px) {
63
  #content {
64
  padding: 15px;
65
  }
66
  }
67
  </style>
68
- <article id="content"></article>
 
 
69
 
70
  <script>
 
71
  var source = new EventSource("https://matthoffner-starchat-alpha.hf.space/stream");
 
72
  source.onmessage = function(event) {
73
- document.getElementById("content").innerHTML = marked.parse(document.getElementById("content").innerHTML + event.data)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  };
75
  </script>
76
 
 
1
  import fastapi
 
2
  import markdown
3
  import uvicorn
4
  from ctransformers import AutoModelForCausalLM
5
  from fastapi.responses import HTMLResponse
6
  from fastapi.middleware.cors import CORSMiddleware
7
  from sse_starlette.sse import EventSourceResponse
8
+ from pydantic import BaseModel
 
 
 
9
 
10
  llm = AutoModelForCausalLM.from_pretrained("NeoDim/starchat-alpha-GGML",
11
  model_file="starchat-alpha-ggml-q4_0.bin",
 
37
  <!DOCTYPE html>
38
  <html>
39
  <head>
40
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
41
  </head>
42
  <body>
43
  <style>
44
+ body {
45
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
46
+ }
47
  code {
48
+ font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace !important;
49
+ display: inline-block;
50
+ background-color: lightgray;
51
+ }
52
+ h1 h2 h3 h4 h5 h6 {
53
+ font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
54
  }
55
  #content {
 
56
  box-sizing: border-box;
57
  min-width: 200px;
58
  max-width: 980px;
 
60
  padding: 45px;
61
  font-size: 16px;
62
  }
 
63
  @media (max-width: 767px) {
64
  #content {
65
  padding: 15px;
66
  }
67
  }
68
  </style>
69
+
70
+ <script type="module" src="https://cdn.skypack.dev/@vanillawc/wc-markdown"></script>
71
+ <wc-markdown id="content" highlight><h1>starchat-alpha-q4.0</h1></wc-markdown>
72
 
73
  <script>
74
+ var converter = new showdown.Converter();
75
  var source = new EventSource("https://matthoffner-starchat-alpha.hf.space/stream");
76
+ let eventCache;
77
  source.onmessage = function(event) {
78
+ let eventData = event.data;
79
+ console.log(eventData);
80
+ if (eventData.includes("```")) {
81
+ eventCache = true;
82
+ return;
83
+ }
84
+ if (eventCache && !eventData.includes("```")) {
85
+ backticks = "```";
86
+ eventData = `${backticks}${eventData}<br /><code>`;
87
+ eventCache = false;
88
+ }
89
+ if (eventData === ":") {
90
+ eventData = `${eventData}<br />`;
91
+ }
92
+ if (eventData === "<|assistant|>") {
93
+ eventData = `<br />${eventData}`;
94
+ }
95
+ if (eventData === "<|end|>") {
96
+ eventData = "<br />";
97
+ }
98
+ document.getElementById("content").innerHTML = document.getElementById("content").innerHTML + eventData;
99
  };
100
  </script>
101