🔧 Add templates

Makefile

@@ -63,3 +63,6 @@ super-linter:
 	-e PYTHON_MYPY_CONFIG_FILE=mypy.ini \
 	-e VALIDATE_KUBERNETES_KUBECONFORM=false \
 	-v $(shell pwd):/tmp/lint github/super-linter
+
+chat:
+	curl -X POST http://localhost:11434/api/chat -H "Content-Type: application/json" -d "{\"model\": \"llama3\", \"messages\": [{\"role\": \"user\", \"content\": \"why is the sky blue?\"}, {\"role\": \"assistant\", \"content\": \"due to rayleigh scattering.\"}, {\"role\": \"user\", \"content\": \"how is that different than mie scattering?\"}]}"

streamingapp/templates/streamingapp/includes/conversation.html

@@ -0,0 +1,107 @@
+<div id="messages" class="moj-messages-container" style="margin-top: 20px;">
+  <div class="moj-message-list">
+    <div class="moj-message-item__text moj-message-item__text--received"></div>
+  </div>
+</div>
+
+<div class="govuk-form-group" style="width: 62%; margin: 10px auto 0 auto;">
+  <form id="ollama-form">
+    <textarea class="govuk-textarea" id="user-input" name="user-input" rows="2" placeholder="Message Ollamate here" aria-describedby="more-detail-hint" oninput="this.style.height = '';this.style.height = this.scrollHeight + 'px'" required></textarea>
+    <div style="float: right;">
+      <button type="submit" class="govuk-button" data-module="govuk-button">
+        Send
+      </button>
+    </div>
+  </form>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js" integrity="sha384-GP2+CwBlakZSDJUr+E4JvbxpM75i1i8+RKkieQxzuyDZLG+5105E1OfHIjzcXyWH" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js" integrity="sha384-GdEWAbCjn+ghjX0gLx7/N1hyTVmPAjdC2OvoAA0RyNcAOhqwtT8qnbCxWle2+uJX" crossorigin="anonymous"></script>
+
+<script>
+  $(document).ready(function() {
+    var converter = new showdown.Converter(); // Create a new Showdown converter
+    var conversationHistory = [];
+
+    $('#ollama-form').on('submit', function(event) {
+      event.preventDefault();
+      var userInput = $('#user-input').val();
+
+      // Check if user input is empty
+      if (!userInput.trim()) {
+        return; // Stop execution if input is empty
+      }
+
+      $('#user-input').val('');
+
+      var currentTime = new Date().toLocaleTimeString();
+
+      conversationHistory.push({"role": "user", "content": userInput, "time": currentTime});
+
+      var newMessage = $('<div class="moj-message-item moj-message-item--sent"><div class="moj-message-item__text moj-message-item__text--sent"></div><div class="moj-message-item__meta"><span class="moj-message-item__meta--sender">You</span> at <time class="moj-message-item__meta--timestamp" datetime="' + currentTime + '">' + currentTime + '</time></div></div>');
+      newMessage.find('.moj-message-item__text--sent').text(userInput);
+      $('#messages .moj-message-list').append(newMessage);
+
+      // Create a temporary message with a single dot
+      var loadingMessage = '<div id="loading" class="moj-message-item moj-message-item--received"><div class="moj-message-item__text moj-message-item__text--received">.</div></div>';
+      $('#messages .moj-message-list').append(loadingMessage);
+
+      // Start the loading animation
+      var dots = '.';
+      var loadingAnimation = setInterval(function() {
+        dots = (dots.length < 3) ? (dots + '.') : '.';
+        $('#loading .moj-message-item__text').text(dots);
+      }, 1000);
+
+      $.ajax({
+        url: "{% url 'call_ollama' %}",
+        type: "POST",
+        data: {
+          userInput: JSON.stringify(conversationHistory),
+          csrfmiddlewaretoken: '{{ csrf_token }}'
+        },
+        success: function(response) {
+          // Stop the loading animation and remove the loading message
+          clearInterval(loadingAnimation);
+          $('#loading').remove();
+
+          var ollamaResponse = response.response;
+          var currentTime = new Date().toLocaleTimeString();
+
+          conversationHistory.push({"role": "assistant", "content": ollamaResponse, "time": currentTime});
+
+          var formattedResponse = converter.makeHtml(ollamaResponse); // Use Showdown to convert Markdown to HTML
+
+          var newResponse = '<div class="moj-message-item moj-message-item--received"><div class="moj-message-item__text moj-message-item__text--received">' + formattedResponse + '</div><div class="moj-message-item__meta"><span class="moj-message-item__meta--sender">Ollama</span> at <time class="moj-message-item__meta--timestamp" datetime="' + currentTime + '">' + currentTime + '</time></div></div>';
+          $('#messages .moj-message-list').append(newResponse);
+
+          $('pre code').each(function(i, block) {
+            hljs.highlightBlock(block);
+          });
+        },
+        error: function(xhr, status, error) {
+          // Stop the loading animation and remove the loading message
+          clearInterval(loadingAnimation);
+          $('#loading').remove();
+
+          var errorMessage = '<div class="moj-message-item moj-message-item--received"><div class="moj-message-item__text moj-message-item__text--received">Error: ' + xhr.responseText + '</div></div>';
+          $('#messages .moj-message-list').append(errorMessage);
+        }
+      });
+    });
+  });
+</script>
+
+<style>
+  .moj-messages-container {
+      width: 62%;
+      margin: 0 auto;
+      overflow: hidden;
+  }
+  .moj-message-item__text {
+      padding: 10px;
+      overflow: auto;
+      word-wrap: break-word;
+  }
+</style>

streamingapp/templates/streamingapp/includes/footer.html

@@ -0,0 +1,37 @@
+<footer class="govuk-footer">
+    <div class="govuk-width-container">
+      <div class="govuk-footer__meta">
+        <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+          <h2 class="govuk-visually-hidden">Support links</h2>
+          <ul class="govuk-footer__inline-list">
+            <li class="govuk-footer__inline-list-item">
+              <a class="govuk-footer__link" href="#">
+                <a href="https://user-guidance.analytical-platform.service.justice.gov.uk/#overview">User Guidance</a>
+              </a>
+            </li>
+            <li class="govuk-footer__inline-list-item">
+                <a class="govuk-footer__link" href="#">
+                  <a href="https://github.com/ministryofjustice/data-platform-support">Help</a>
+                </a>
+              </li>
+            <li class="govuk-footer__inline-list-item">
+              <a class="govuk-footer__link" href="#">
+                <a href="https://github.com/ministryofjustice/analytical-platform-ollamate">GitHub</a>
+              </a>
+            </li>
+          </ul>
+          <div class="govuk-footer__meta-custom">
+            Built by the <a href="https://github.com/ministryofjustice/analytical-platform" class="govuk-footer__link">Ministry of Justice - Analytical Platform</a>
+            </div>
+        </div>
+
+        <div class="govuk-footer__meta-item">
+          <a
+            class="govuk-footer__link govuk-footer__copyright-logo"
+            href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
+            © Crown copyright
+          </a>
+        </div>
+      </div>
+    </div>
+  </footer>

streamingapp/templates/streamingapp/includes/header.html

@@ -0,0 +1,31 @@
+<header class="moj-header" role="banner">
+
+    <div class="moj-header__container">
+
+      <!-- <div class="moj-header__logo" style="display: flex; align-items: center; justify-content: start; gap: 10px;"> -->
+      <div class="moj-header__logo">
+
+        {% include "includes/moj_header.svg" %}
+
+        <a class="moj-header__link moj-header__link--organisation-name" href="{{ header_organisation_url }}">Ministry of Justice</a>
+
+        <a class="moj-header__link moj-header__link--service-name" href="{{ header_service_url}}">Ollamate 🦙🍵</a>
+      </div>
+      <div class="moj-header__content">
+
+        <nav class="moj-header__navigation" aria-label="Account navigation">
+
+          <ul class="moj-header__navigation-list">
+            {% for item in header_nav_items %}
+                {% include "includes/nav_item.html" with item=item level="moj-header__navigation-" %}
+            {% endfor %}
+          </ul>
+
+        </nav>
+
+      </div>
+    </div>
+
+</header>
+
+{% include "includes/navigation.html" %}

streamingapp/templates/streamingapp/includes/model_selector.html

@@ -0,0 +1,10 @@
+<div class="govuk-form-group">
+    <label class="govuk-label" for="sort">
+      Model
+    </label>
+    <select class="govuk-select" id="sort" name="sort">
+      <option value="llama3" selected>llama3</option>
+      <option value="orca-mini">orca-mini</option>
+      <option value="gemini">gemini</option>
+    </select>
+</div>

streamingapp/templates/streamingapp/includes/nav_item.html

@@ -0,0 +1,3 @@
+<li class="{{ level }}item">
+    <a class="{{ level }}link" {% if item.active %}aria-current="page" {% endif %}href="{{ item.url }}">{{ item.name }}</a>
+</li>

streamingapp/templates/streamingapp/includes/navigation.html

@@ -0,0 +1,20 @@
+<div class="moj-primary-navigation">
+
+    <div class="moj-primary-navigation__container">
+
+      <div class="moj-primary-navigation__nav">
+
+        <nav class="moj-primary-navigation" aria-label="Primary navigation">
+
+          <ul class="moj-primary-navigation__list">
+            {% for item in nav_items %}
+                {% include "includes/nav_item.html" with level="moj-primary-navigation__" %}
+            {% endfor %}
+          </ul>
+
+        </nav>
+
+      </div>
+    </div>
+
+  </div>

streamingapp/templates/streamingapp/includes/phase_banner.html

@@ -0,0 +1,12 @@
+<div class="moj-header__container">
+    <div class="govuk-phase-banner">
+    <p class="govuk-phase-banner__content">
+      <strong class="govuk-tag govuk-phase-banner__content__tag">
+        Beta
+      </strong>
+      <span class="govuk-phase-banner__text">
+        This is a new service. Help us improve it and <a class="govuk-link" href="https://moj.enterprise.slack.com/archives/C06NFN4FMNG">give your feedback in Slack.</a>.
+      </span>
+    </p>
+  </div>
+</div>