Minor Changes

application/static/css/style.css

@@ -270,9 +270,10 @@ code{
     left: 50%;
     transform: translate(-50%,-50%);
     width: 320px;
-    height: 300px;
+    height: 320px;
     display: flex;
     flex-direction: column;
+    gap: 0px;
     color: #d8d8d8;
     background-color: #222222;
     box-shadow: 6px 6px rgb(41, 41, 41) ;
@@ -281,12 +282,12 @@ code{
 }
 .alert p{
     float: left;
-    padding: 10px;
     font-family: 'Inter';
     font-weight: 300;
     font-size: 15px;
     color: #cfcfcf; 
     opacity: 0.9;
+    padding-left: 10px;
 }
 .closeAlert{
     margin-left: auto;
@@ -298,12 +299,25 @@ code{
     border-radius: 10px;
     color: #ffffff;
 }
+.discord {
+    margin: 10px;
+    text-decoration: none;
+    color: rgb(211, 211, 211);
+    padding: 7.5px;
+    border-radius: 10px;
+    background: linear-gradient(to right, #4A148C, #9c18e3);
+    cursor: pointer;
+    display: inline-block;
+    font-size: 13px;
+    max-width: 77px;
+}
 .note{
     text-align: center;
     background-color: rgba(119, 16, 238, 0.55);
     box-shadow: 6px 6px rgb(32, 32, 32) ;
     margin: auto;
     width: 70px;
+    padding: 10px;
 }
 
 @media screen and (max-width: 780px){

application/static/js/components/renderSymbols.js

@@ -26,20 +26,36 @@ class RenderSymbols{
         elem.innerHTML = elem.innerHTML.replace(/\n/g, '<br>');
     }
     renderCode(element) {
-        let content = element.innerHTML;        
+        let content = element.innerHTML;
+    
         if (content.includes("```") && content.split("```").length >= 3) {
             content = content.replace(/```(\w*)<br>([\s\S]*?)```/g, (match, language, code) => {
                 code = code.replace(/<br>/g, '\n').trim();
-                language = language.trim() || 'text';
+                language = language.trim() || 'text';    
+                code = this.escapeHTML(code);
+    
                 return `<pre class="code-block"><code class="language-${language}">${code}</code></pre>`;
             });
-            
+    
             element.innerHTML = content;
+    
             element.querySelectorAll('code:not(.hljs)').forEach(block => {
                 hljs.highlightElement(block);
             });
         }
     }
+    escapeHTML(str) {
+        return str.replace(/[&<>"']/g, function (char) {
+            const map = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#39;',
+            };
+            return map[char] || char;
+        });
+    }
   
 }
 export default RenderSymbols

application/templates/index.html

@@ -40,8 +40,9 @@
     <div class="alert" id="alert">
         <div class="closeAlert" id="closeAlert">X</div>
        <p class="note">Note</p>
-        <p>You can easily use your own API provider to run this application; just update the pipeline.json file</p>
-        <p>The file/image attachment feature for the vision model has not been implemented yet.</p>
+        <p>---> You can easily use your own API provider to run this application; just update the pipeline.json file</p>
+        <p>---> The file/image attachment feature for the vision model has not been implemented yet.</p>
+        <a href="https://discord.gg/tRC7hNXfPH" class="discord" `target="_blank"> Join Discord </a>
     </div>
     <div class="textCustomization">
         <div class="colors"></div>