Spaces:

Nik97
/

Refineverse

Running

App Files Files Community

Nik97 commited on May 3, 2023

Commit

2db0bd6

•

1 Parent(s): 2e11420

Upload 4 files

Browse files

Files changed (4) hide show

templates/LanguageTranslationUI.html +90 -0
templates/ProjectBreakdownUI.html +155 -0
templates/RefineverseDashboardUI.html +44 -0
templates/TextSummarizationUI.html +75 -0

templates/LanguageTranslationUI.html ADDED Viewed

	@@ -0,0 +1,90 @@

+<!-- jinja2 template engine coding style for flask framework -->
+<!-- To Debug: css and form -->
+<!DOCTYPE html>
+<head>
+    <title>LanguageTranslationUI</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='Translation.css') }}">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+</head>
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <div class="k">
+        <img src="{{ url_for('static', filename='Images/Refineverse logo.png') }}" alt="Refineverse Logo">
+    <div class="kk">
+    <h1>Language Translation</h1>
+    <h5>Machine Translation for your desired choice of language.</h5>
+</div>
+</div>
+    <form action="#" method="POST">
+        <!-- Drop-down box for source language. -->
+        <label for="source_language" id="source">Choose your source language:</label>
+        <select id="language" name="source_language">
+            <option value="en" selected>English</option>
+            <option value="zh">Chinese</option>
+            <option value="ms">Malay</option>
+            <option value="ta">Tamil</option>
+            <option value="th">Thai</option>
+        </select>
+        <!-- Drop-down box for target language. -->
+        <label for="target_language" id="target">Choose your target language:</label>
+        <select id="language" name="target_language">
+            <option value="en">English</option>
+            <option value="zh" selected>Chinese</option>
+            <option value="ms">Malay</option>
+            <option value="ta">Tamil</option>
+            <option value="th">Thai</option>
+        </select>
+        <!-- div container for input & translation textareas -->
+        <div class="kkk">
+            <textarea id="type" name="input" placeholder="Please enter your User Story in 'As a _ , I want to _ so that _'/'作为__ , 我想要__以便__。'/'Sebagai__, saya mahu__supaya__.'/'என__, எனக்கு வேண்டும்__அதனால்__.'/'ในฐานะ__, ฉันต้องการ__เพื่อที่ฉัน__.' format.">{{ input_text }}</textarea>
+            <textarea id="out" name="out" placeholder="Your translated user story will appear here!" readonly>{{ translatedStory }}</textarea>
+        </div>
+        <!--
+            Jinja template for displaying flash messages. Gets all flash messages to be displayed on page.
+            To note: Pay attention to the category name. It MUST match the category name given on flask-end (Refineverse.py)!
+        -->
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% for category, message in messages %}
+                {% if category == 'error' %}
+                <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                    {{ message }}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+                {% else %}
+                <div class="alert alert-success alert-dismissible fade show" role="alert">
+                    {{ message }}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+                {% endif %}
+            {% endfor %}
+        {% endwith %}
+        <div class="kkkk">
+            <button id="clear" onclick="clearContent()" type="button">Clear</button>
+            <button id="translate" type="submit">Translate</button>
+        </div>
+    </form>
+<!-- need debug this part for css as button all the way to the right -->
+<div class="back">
+    <a href="{{ url_for('index') }}"><button class="backb">Back</button></a>
+</div>
+<script>
+function clearContent()
+{
+    const type = document.getElementById('type');
+    const out = document.getElementById('out');
+    type.value = '';
+    out.value = '';
+}
+</script>
+</body>
+</html>

templates/ProjectBreakdownUI.html ADDED Viewed

	@@ -0,0 +1,155 @@

+<!-- jinja2 template engine coding style for flask framework -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Project Task Breakdown</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='ProjectBreakdown.css') }}">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+  </head>
+  <body>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <header>
+      <img src="{{ url_for('static', filename='Images/Refineverse logo.png') }}" alt="Refineverse Logo">
+      <h1>Project Task Breakdown</h1>
+    </header>
+    <!-- User input textarea box; breakdown & clear button functionality; display output functionality -->
+    <main>
+      <form action="#" method="POST">
+        <div class="user-story">
+          <h2>User Story</h2>
+          <textarea id="user-story-text" name='user-story-text' placeholder="Enter your user story"></textarea>
+          <button id="clear-btn" formmethod="GET" formaction="#" onclick="clearTextArea()">Clear</button>
+          <!-- When using flash, it is necessary to always use a for-loop to grab all messages -->
+          {% with messages = get_flashed_messages(with_categories=true) %} <!-- This is to use flash with pre-set categories -->
+            {% for category, message in messages %}
+              {% if category == 'error' %} <!-- If it is a flash message with the error, message, we display our exception message -->
+                <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                   {{ message }}
+                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+              {% else %} <!-- Otherwise, proceed as usual -->
+                <div class="alert alert-success alert-dismissible fade show" role="alert">
+                  {{ message }}
+                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+              {% endif %}
+            {% endfor %}
+          {% endwith %}
+          <button id="breakdown-btn" name="breakdown-btn" type="submit">Breakdown</button>
+        </div>
+      </form>
+      <div class="user-story-list">
+        <h2>Breakdown Summary</h2>
+        <!-- Output Table -->
+        <table id="breakdown-table">
+          <thead>
+              <tr>
+                  <th onclick="sortTable(0)">User Story</th>
+                  <th onclick="sortTable(1)">Project Task</th>
+              </tr>
+          </thead>
+          <!-- will need to Use For Loop to link sqlite3 database -->
+          <tbody id="breakdown-body">
+            {% for row in rows %}
+            <tr>
+              <!-- Return and display output from Refineverse.py based on routing from ZeroshotFeature.py -->
+              <td>{{ row[0] }}</td>
+              <td>{{ row[1] }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </main>
+    <div class="back-Btn-Container">
+      <div class="buttons-container">
+        <a href="{{ url_for('index') }}"><button class="back-btn">Back</button></a>
+      </div>
+    </div>
+    <script>
+      function clearTextArea() {
+        document.getElementById("user-story-text").value = "";
+      }
+      // Function to sort table in ascending/descending order
+      function sortTable(columnIndex) {
+        // Initialize variables
+        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+        table = document.getElementById("breakdown-table");
+        switching = true;
+        // Set the sorting direction to ascending:
+        dir = "asc";
+        /* Make a loop that will continue until
+        no switching has been done: */
+        while (switching) {
+          // Start by saying: no switching is done:
+          switching = false;
+          rows = table.rows;
+          /* Loop through all table rows (except the
+          first, which contains table headers): */
+          for (i = 1; i < (rows.length - 1); i++) {
+            // Start by saying there should be no switching:
+            shouldSwitch = false;
+            /* Get the two elements you want to compare,
+            one from current row and one from the next: */
+            x = rows[i].getElementsByTagName("TD")[columnIndex];
+            y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
+            /* Check if the two rows should switch place,
+            based on the direction, asc or desc: */
+            if (dir == "asc") {
+              if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+                // If so, mark as a switch and break the loop:
+                shouldSwitch = true;
+                break;
+              }
+            } else if (dir == "desc") {
+              if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+                // If so, mark as a switch and break the loop:
+                shouldSwitch = true;
+                break;
+              }
+            }
+          }
+          if (shouldSwitch) {
+            /* If a switch has been marked, make the switch
+            and mark that a switch has been done: */
+            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+            switching = true;
+            // Each time a switch is done, increase this count by 1:
+            switchcount ++;
+          } else {
+            /* If no switching has been done AND the direction is "asc",
+            set the direction to "desc" and run the while loop again. */
+            if (switchcount == 0 && dir == "asc") {
+              dir = "desc";
+              switching = true;
+            }
+          }
+        }
+        // Add arrow icons to the header cells to indicate the sort direction:
+        var headers = table.getElementsByTagName("TH");
+        for (i = 0; i < headers.length; i++) {
+            headers[i].innerHTML = headers[i].innerHTML.replace(/ ▲| ▼/g, "");
+        }
+        var arrow = document.createElement("span");
+        arrow.className = "arrow";
+        if (dir == "asc") {
+            arrow.innerHTML = " ▲";
+        } else {
+            arrow.innerHTML = " ▼";
+        }
+        headers[columnIndex].appendChild(arrow);
+      }
+    </script>
+  </body>
+</html>

templates/RefineverseDashboardUI.html ADDED Viewed

	@@ -0,0 +1,44 @@

+<!-- jinja2 template engine coding style for flask framework -->
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>DashboardUI</title>
+        <link rel="stylesheet" href="{{url_for('static', filename='Dashboard.css')}}">
+    </head>
+    <body>
+        <div class="title">
+        <img src="{{url_for('static', filename='Images/Refineverse logo.png')}}" alt="cant find picture">
+        <h1>User Story Refinement</h1>
+        </div>
+        <div class="pic">
+            <img src="{{url_for('static', filename='Images/Text Summarization.png')}}" alt="cant find picture" class="p1">
+            <img src="{{url_for('static', filename='Images/Project Breakdown.png')}}" alt="cant find picture" class="p2">
+            <img src="{{url_for('static', filename='Images/Language Translation.jpg')}}" alt="cant find picture" class="p3">
+        </div>
+        <div class="trdl">
+            <div class="texts1">
+            <h2>Text Summarization</h2>
+            <p id="f">With our plugin's natural language processing capabilities, you can now generate a concise summary of your user story with just a few clicks. No more sifting through lengthy descriptions or struggling to communicate the essence of your user story to team members. Our plugin does the heavy lifting for you!</p>
+        </div>
+        <div class="texts2">
+            <h2>Project Task Breakdown</h2>
+            <p id="s">With our plugin's natural language processing capabilities, our project task breakdown feature allows you to reduce a user story into multiple project tasks, for easier allocation of tasks to project members within a team. No more having to think of project tasks for team allocation.</p>
+            </div>
+        <div class="texts3">
+            <h2>Language Translation</h2>
+            <p id="t">With our plugin's advanced natural language processing capabilities, our language translation feature provides customizable translation options, allowing you to choose which languages you want to translate your user stories into. Allowing team members who speak different languages to collaborate more effectively and improving productivity.</p>
+            </div>
+        </div>
+        <div class="buttonc">
+            <a href="{{url_for('text_summarization')}}" class="button1">Text Summarization</a>
+            <a href="{{url_for('project_breakdown')}}" class="button1">Project Task Breakdown</a>
+            <a href="{{url_for('language_translation')}}" class="button1">Language Translation</a>
+        </div>
+    </body>
+</html>

templates/TextSummarizationUI.html ADDED Viewed

	@@ -0,0 +1,75 @@

+<!-- jinja2 template engine coding style for flask framework -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>TextSummarizationUI</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='TextSummarization.css') }}">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+  </head>
+  <body>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <div class="container">
+      <div class="logo">
+        <img id="refineverseLogo" alt="RefineverseLogo" src="{{ url_for('static', filename='Images/Refineverse logo.png') }}" class="home-image"/>
+      </div>
+      <div>
+        <label class="title">Text Summarization</label>
+        <p class="message">
+          Splitting large user stories into smaller user stories.
+        </p>
+      </div>
+    </div>
+    <div class="container">
+      <form method="POST" action="#">
+        <div class="box">
+          <textarea class="textarea" name="input_text" id="input_textarea" placeholder="Please describe your User Story in 'As a _ , I want to _ so that _' format."></textarea>
+        </div>
+        <div class="box1">
+          <textarea class="textarea1" name="output_text" id="output_textarea" placeholder="Your summarized output goes here!" readonly>{{ summarizedStory }}</textarea>
+        </div>
+        <div class="buttons-container">
+          <button class="ClearBtn" type="button" onclick="clearTextareas()">Clear</button>
+          <button class="SummarizeBtn" type="submit">Summarize</button>
+        </div>
+      </form>
+    </div>
+    <div class="messages-container">
+      {% with messages = get_flashed_messages(with_categories=true) %}
+        {% for category, message in messages %}
+          {% if category == 'error' %}
+          <div class="alert alert-danger alert-dismissible fade show" role="alert">
+              {{ message }}
+              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+          </div>
+          {% else %}
+          <div class="alert alert-success alert-dismissible fade show" role="alert">
+              {{ message }}
+              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+          </div>
+          {% endif %}
+        {% endfor %}
+      {% endwith %}
+    </div>
+  </div>
+    <div class="BackBtnContainer">
+      <div class="buttons-container">
+        <a href="{{ url_for('index') }}"><button class="BackBtn">Back</button></a>
+      </div>
+    </div>
+    <script>
+      function clearTextareas()
+      {
+        document.getElementById('input_textarea').value = '';
+        document.getElementById('output_textarea').value = '';
+      }
+    </script>
+  </body>
+</html>