Upload 23 files

static/Dashboard.css

@@ -0,0 +1,161 @@
+body{
+    background-image:url("../static/Images/Background.jpg");
+    background-repeat: no-repeat;
+  background-size: cover;
+}
+.title{
+    display:flex;
+    flex-direction:row;
+    align-items: center;
+}
+.title img{
+    width: 250px;
+    height: 250px;
+    margin-right: 170px;
+    margin-left: 280px;
+    margin-top: 20px;
+}
+.title h1{
+    white-space: nowrap;
+    font-size: 70px;
+    color:rgb(80, 80, 80);
+}
+
+.p1{
+    width: 380px;
+    height: 220px;
+    border: 2px solid rgb(139, 138, 138);
+    padding-top: 10px;
+    padding-bottom: 10px;
+    
+}
+.p2{
+    width: 240px;
+    height: 220px;
+    border: 2px solid rgb(139, 138, 138);
+    padding-left: 60px;
+    padding-right: 60px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-left: 240px;
+   
+}
+.p3{
+    width: 240px;
+    height: 220px;
+    border: 2px solid rgb(139, 138, 138);
+    padding-left: 60px;
+    padding-right: 60px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    
+}
+.p4{
+    width: 230px;
+    height: 220px;
+    border: 2px solid rgb(139, 138, 138);
+    padding-left: 85px;
+    padding-right: 60px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-left: 250px;
+    
+}
+.con1{
+    display: flex;
+    flex-direction: column;
+    margin-left: 400px;
+}
+.trd2{
+    margin-top: 20px;
+}
+
+.trdl h2{
+    white-space: nowrap;
+    font-size: 30px;
+    color:rgb(28, 29, 29)
+}
+
+.trd2 h2{
+    white-space: nowrap;
+    font-size: 30px;
+    color:rgb(28, 29, 29)
+}
+.buttonc, .buttonc1{
+    margin-top: 40px;
+    white-space:nowrap;
+}
+.buttonc a{
+    display: inline-block;
+    color: white;
+    background-color: rgb(85, 81, 81);
+    padding: 10px 20px;
+    border-radius: 5px;
+  text-decoration: none;
+  font-size: 18px;
+}
+.buttonc1 a{
+    display: inline-block;
+    color: white;
+    background-color: rgb(85, 81, 81);
+    padding: 10px 20px;
+    border-radius: 5px;
+  text-decoration: none;
+  font-size: 18px;
+}
+.pic{
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+   
+}
+.pic1{
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    
+}
+.tc1{
+    display: flex;
+    flex-direction: row;
+    margin-bottom:-30px;
+}
+.tc2{
+    display: flex;
+    flex-direction: row;
+}
+.texts1{
+    width:400px;
+    word-wrap: break-word;
+}
+.texts2{
+    width:400px;
+    word-wrap: break-word;
+    margin-left: 220px;
+    
+}
+.texts3{
+    width:400px;
+    word-wrap: break-word;
+    min-width: 400px;
+
+}
+.texts4{
+    width:400px;
+    word-wrap: break-word;
+    margin-left: 220px;
+    
+}
+.button1{
+    margin-left: 50px;
+}
+.button2{
+    margin-left: 350px;
+}
+.button3{
+    margin-left: 50px;
+}
+.button4{
+    margin-left: 380px;
+}

static/GenerationTable.css

@@ -0,0 +1,45 @@
+
+#generation-table {
+    width: 100%;
+  }
+  
+  #generation-table th,
+  #generation-tablee td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+  
+  #generation-table th:first-child {
+    border-left: none;
+  }
+  
+  #generation-table th:last-child {
+    border-right: none;
+  }
+  
+  #generation-table th:not(:first-child) {
+    border-left: none;
+    border-right: none;
+  }
+  
+  #generation-table th div {
+    border-bottom: 1px solid #ddd;
+    padding: 8px;
+  }
+  
+  #generation-table td div {
+    padding: 8px;
+  }
+  
+  #generation-table thead th {
+    background-color: #f2f2f2;
+  }
+  
+  #generation-table tbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+  
+  #generation-table tbody tr:hover {
+    background-color: #ddd;
+  }

static/ProjectBreakdown.css

@@ -0,0 +1,190 @@
+body{
+  background-image:url("../static/Images/Background.jpg");
+  background-repeat: no-repeat;
+background-size: cover;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  zoom: 130%;
+  padding: 15px;
+}
+
+header img {
+  /* Original width & height is 70px */
+  width: 200px;
+  height: 200px;
+  margin-left: 300px;
+}
+
+header h1 {
+  margin-left: 50px;
+  font-size: 40px;
+  color: rgb(26, 25, 25);
+}
+
+main {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.user-story {
+  flex-basis: 30%;
+  margin-left: 50px;
+}
+
+.user-story h2 {
+  margin-bottom: 10px;
+}
+
+textarea {
+  width: 900px;
+  height: 400px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  resize: none !important;
+  margin-bottom: 10px;
+  
+}
+
+table {
+  flex-basis: 60%;
+  margin-right: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  overflow-y: scroll; /* To make the table scrollable */
+  height: 200px; /* To match text area size */
+  display: block;
+  border-collapse: separate; /* Added to separate the border between the headers and the data cells */
+  border-spacing: 0; /* Added to remove the extra space between the border */
+}
+
+#breakdown-table {
+  width: 900px;
+  height: 400px;
+  margin-left: 20px;
+}
+
+#breakdown-table th,
+#breakdown-table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+#breakdown-table th:first-child {
+  border-left: none;
+}
+
+#breakdown-table th:last-child {
+  border-right: none;
+}
+
+#breakdown-table th:not(:first-child) {
+  border-left: none;
+  border-right: none;
+}
+
+#breakdown-table th div {
+  border-bottom: 1px solid #ddd;
+  padding: 8px;
+}
+
+#breakdown-table td div {
+  padding: 8px;
+}
+
+#breakdown-table thead th {
+  background-color: #f2f2f2;
+}
+
+#breakdown-table tbody tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+#breakdown-table tbody tr:hover {
+  background-color: #ddd;
+}
+
+
+#clear-btn {
+  background-color: #d3d5d6;
+  color: rgb(32, 31, 31);
+  border: 2px;
+  border-radius: 5px;
+  padding: 10px;
+  cursor: pointer;
+}
+
+#breakdown-btn {
+  background-color: #2f3030;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 10px;
+  cursor: pointer;
+  /* Added these 2 lines to make button appear at btm-right of user story contents.
+  Not sure if this is the correct way to do it, but it looks alright for me? */
+  position: absolute;
+  left: 1750px;
+}
+
+.user-story-list {
+  flex-basis: 60%;
+  margin-right: 20px;
+}
+
+.user-story-list h2 {
+  margin-bottom: 10px;
+}
+
+.scrollable-box {
+  height: 200px;
+  overflow-y: auto;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  resize: none;
+}
+
+#user-story-ul {
+  list-style: none;
+  padding: 10px;
+}
+
+.back-Btn-Container {
+  display: flex;
+  justify-content: end;
+  align-items: end;
+  padding: 0 20px;
+  margin-top: 20px;
+}
+
+.buttons-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  margin-top: 20px;
+}
+
+.back-btn {
+  background-color: #555;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-right: 150px;
+  width: 110px;
+  height: 40px;
+}

static/SummarizationTable.css

@@ -0,0 +1,49 @@
+body{
+  background-image:url("../static/Images/Background.jpg");
+  background-repeat: no-repeat;
+background-size: cover;
+}
+#summarization-table {
+    width: 100%;
+  }
+  
+  #summarization-table th,
+  #summarization-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+  
+  #summarization-table th:first-child {
+    border-left: none;
+  }
+  
+  #summarization-table th:last-child {
+    border-right: none;
+  }
+  
+  #summarization-table th:not(:first-child) {
+    border-left: none;
+    border-right: none;
+  }
+  
+  #summarization-table th div {
+    border-bottom: 1px solid #ddd;
+    padding: 8px;
+  }
+  
+  #summarization-table td div {
+    padding: 8px;
+  }
+  
+  #summarization-table thead th {
+    background-color: #f2f2f2;
+  }
+  
+  #summarization-table tbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+  
+  #summarization-table tbody tr:hover {
+    background-color: #ddd;
+  }

static/TextGeneration.css

@@ -0,0 +1,317 @@
+body{
+  background-image:url("../static/Images/Background.jpg");
+  background-repeat: no-repeat;
+background-size: cover;
+}
+:root {
+    --dl-color-gray-500: #595959;
+    --dl-color-gray-700: #999999;
+    --dl-color-gray-900: #d9d9d9;
+    --dl-size-size-large: 144px;
+    --dl-size-size-small: 48px;
+    --dl-color-danger-300: #a22020;
+    --dl-color-danger-500: #bf2626;
+    --dl-color-danger-700: #e14747;
+    --dl-color-gray-black: #000000;
+    --dl-color-gray-white: #ffffff;
+    --dl-size-size-medium: 96px;
+    --dl-size-size-xlarge: 192px;
+    --dl-size-size-xsmall: 16px;
+    --dl-space-space-unit: 16px;
+    --dl-color-primary-100: #003eb3;
+    --dl-color-primary-300: #0074f0;
+    --dl-color-primary-500: #14a9ff;
+    --dl-color-primary-700: #85dcff;
+    --dl-color-success-300: #199033;
+    --dl-color-success-500: #32a94c;
+    --dl-color-success-700: #4cc366;
+    --dl-size-size-xxlarge: 288px; 
+    --dl-size-size-maxwidth: 1400px;
+    --dl-radius-radius-round: 50%;
+    --dl-space-space-halfunit: 8px;
+    --dl-space-space-sixunits: 96px;
+    --dl-space-space-twounits: 32px;
+    --dl-radius-radius-radius2: 2px;
+    --dl-radius-radius-radius4: 4px;
+    --dl-radius-radius-radius8: 8px;
+    --dl-space-space-fiveunits: 80px;
+    --dl-space-space-fourunits: 64px;
+    --dl-space-space-threeunits: 48px;
+    --dl-space-space-oneandhalfunits: 24px;
+  }
+  .button {
+    color: var(--dl-color-gray-black);
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    border-color: var(--dl-color-gray-black);
+    border-width: 1px;
+    border-radius: 4px;
+    background-color: var(--dl-color-gray-white);
+  }
+  .input {
+    color: var(--dl-color-gray-black);
+    cursor: auto;
+    padding: 0.5rem 1rem;
+    border-color: var(--dl-color-gray-black);
+    border-width: 1px;
+    border-radius: 4px;
+    background-color: var(--dl-color-gray-white);
+  }
+  .textarea {
+    color: var(--dl-color-gray-black);
+    cursor: auto;
+    padding: 0.5rem;
+    border-color: var(--dl-color-gray-black);
+    border-width: 1px;
+    border-radius: 4px;
+    background-color: var(--dl-color-gray-white);
+  }
+  .list {
+    width: 100%;
+    margin: 1em 0px 1em 0px;
+    display: block;
+    padding: 0px 0px 0px 1.5rem;
+    list-style-type: none;
+    list-style-position: outside;
+  }
+  .list-item {
+    display: list-item;
+  }
+  .teleport-show {
+    display: flex !important;
+    transform: none !important;
+  }
+  .Heading {
+    font-size: 32px;
+    font-family: Inter;
+    font-weight: 700;
+    line-height: 1.15;
+    text-transform: none;
+    text-decoration: none;
+  }
+  .Content {
+    font-size: 16px;
+    font-family: Inter;
+    font-weight: 400;
+    line-height: 1.15;
+    text-transform: none;
+    text-decoration: none;
+  }
+  
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+  }
+  
+  .container {
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 1000px; 
+    margin: auto;
+    margin-top: 0px;
+    overflow: hidden;
+    margin-top: 50px;
+    
+  }
+  
+  .box {
+    height: 500px;
+    width: 570px;
+    background-color: #f2f2f2;
+    overflow-y: scroll;
+    border: 1px solid gray;
+    display: inline-block;
+    border-radius: 6px;
+  }
+  .box1 {
+    height: 500px;
+    width: 570px;
+    background-color: #f2f2f2;
+    overflow-y: scroll;
+    border: 1px solid gray;
+    display: inline-block;
+    border-radius: 6px;
+  }
+  .box::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  
+  .box::-webkit-scrollbar-track {
+    background-color: #f2f2f2;
+  }
+  
+  .box::-webkit-scrollbar-thumb {
+    background-color: #888;
+    border-radius: 5px;
+  }
+  
+  .box::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+  }
+  .box1::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  
+  .box1::-webkit-scrollbar-track {
+    background-color: #f2f2f2;
+  }
+  
+  .box1::-webkit-scrollbar-thumb {
+    background-color: #888;
+    border-radius: 5px;
+  }
+  
+  .box1::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+  }
+  .textarea {
+    height: 100%;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    border: none;
+    font-size: 16px;
+    resize: none;
+  }
+  .textarea1 {
+    height: 100%;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    border: none;
+    font-size: 16px;
+    resize: none;
+  }
+  .title {
+    text-align: center;
+    padding: 20px;
+    font-size: 62px;
+    font-weight: bold;
+    color: rgb(10, 10, 10);
+  }
+  
+  .message {
+    text-align: center;
+    padding: 0px;
+    font-size: 24px;
+    color: rgb(92, 88, 88);
+    margin-top: -30px;
+  }
+  
+  .logo {
+    height: 250px;
+    width: 250px;
+    margin-right: 150px;
+    
+    
+  }
+  .home-image {
+    max-width: 100%;
+    max-height: 100%;
+  }
+  
+  
+  .ClearBtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: whitesmoke;
+    color: black;
+    padding: 20px 30px;
+    border: none;
+    border-radius: 5px;
+    font-size: 20px;
+    cursor: pointer;
+    margin-left:-20px;
+    width: 110px;
+    height: 40px;
+    border: 1px solid black;
+    margin-left: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-top: 15px;
+   
+  }
+  .ViewBtn {
+    width: 150px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #555;
+    color: #fff;
+    padding: 20px 30px;
+    border: none;
+    border-radius: 5px;
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-left: 800px;
+    margin-top: -40px;
+    margin-right:-20px;
+    width: 150px;
+    height: 40px;
+  }
+  .GenerateBtn {
+    width: 150px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #555;
+    color: #fff;
+    padding: 20px 30px;
+    border: none;
+    border-radius: 5px;
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-left: 1000px;
+    margin-top: -40px;
+    margin-right:-20px;
+    width: 150px;
+    height: 40px;
+  }
+  
+  .BackBtnContainer {
+    display: flex;
+    justify-content: end;
+    align-items: end;
+    padding: 0 20px;
+    margin-top: 20px;
+  }
+  
+  .BackBtn {
+    background-color: #555;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    margin-right: 150px;
+    width: 110px;
+    height: 40px;
+  }
+  
+  @media screen and (max-width: 600px) {
+    .box {
+      height: 400px;
+      width: 90%;
+      margin: 10px auto;
+    }
+  }
+  

static/TextSummarization.css

@@ -0,0 +1,316 @@
+body{
+  background-image:url("../static/Images/Background.jpg");
+  background-repeat: no-repeat;
+background-size: cover;
+}
+:root {
+  --dl-color-gray-500: #595959;
+  --dl-color-gray-700: #999999;
+  --dl-color-gray-900: #d9d9d9;
+  --dl-size-size-large: 144px;
+  --dl-size-size-small: 48px;
+  --dl-color-danger-300: #a22020;
+  --dl-color-danger-500: #bf2626;
+  --dl-color-danger-700: #e14747;
+  --dl-color-gray-black: #000000;
+  --dl-color-gray-white: #ffffff;
+  --dl-size-size-medium: 96px;
+  --dl-size-size-xlarge: 192px;
+  --dl-size-size-xsmall: 16px;
+  --dl-space-space-unit: 16px;
+  --dl-color-primary-100: #003eb3;
+  --dl-color-primary-300: #0074f0;
+  --dl-color-primary-500: #14a9ff;
+  --dl-color-primary-700: #85dcff;
+  --dl-color-success-300: #199033;
+  --dl-color-success-500: #32a94c;
+  --dl-color-success-700: #4cc366;
+  --dl-size-size-xxlarge: 288px; 
+  --dl-size-size-maxwidth: 1400px;
+  --dl-radius-radius-round: 50%;
+  --dl-space-space-halfunit: 8px;
+  --dl-space-space-sixunits: 96px;
+  --dl-space-space-twounits: 32px;
+  --dl-radius-radius-radius2: 2px;
+  --dl-radius-radius-radius4: 4px;
+  --dl-radius-radius-radius8: 8px;
+  --dl-space-space-fiveunits: 80px;
+  --dl-space-space-fourunits: 64px;
+  --dl-space-space-threeunits: 48px;
+  --dl-space-space-oneandhalfunits: 24px;
+}
+.button {
+  color: var(--dl-color-gray-black);
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border-color: var(--dl-color-gray-black);
+  border-width: 1px;
+  border-radius: 4px;
+  background-color: var(--dl-color-gray-white);
+}
+.input {
+  color: var(--dl-color-gray-black);
+  cursor: auto;
+  padding: 0.5rem 1rem;
+  border-color: var(--dl-color-gray-black);
+  border-width: 1px;
+  border-radius: 4px;
+  background-color: var(--dl-color-gray-white);
+}
+.textarea {
+  color: var(--dl-color-gray-black);
+  cursor: auto;
+  padding: 0.5rem;
+  border-color: var(--dl-color-gray-black);
+  border-width: 1px;
+  border-radius: 4px;
+  background-color: var(--dl-color-gray-white);
+}
+.list {
+  width: 100%;
+  margin: 1em 0px 1em 0px;
+  display: block;
+  padding: 0px 0px 0px 1.5rem;
+  list-style-type: none;
+  list-style-position: outside;
+}
+.list-item {
+  display: list-item;
+}
+.teleport-show {
+  display: flex !important;
+  transform: none !important;
+}
+.Heading {
+  font-size: 32px;
+  font-family: Inter;
+  font-weight: 700;
+  line-height: 1.15;
+  text-transform: none;
+  text-decoration: none;
+}
+.Content {
+  font-size: 16px;
+  font-family: Inter;
+  font-weight: 400;
+  line-height: 1.15;
+  text-transform: none;
+  text-decoration: none;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+}
+
+.container {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 1000px; 
+  margin: auto;
+  margin-top: 0px;
+  overflow: hidden;
+  margin-top: 50px;
+  
+}
+
+.box {
+  height: 500px;
+  width: 570px;
+  background-color: #f2f2f2;
+  overflow-y: scroll;
+  border: 1px solid gray;
+  display: inline-block;
+  border-radius: 6px;
+}
+.box1 {
+  height: 500px;
+  width: 570px;
+  background-color: #f2f2f2;
+  overflow-y: scroll;
+  border: 1px solid gray;
+  display: inline-block;
+  border-radius: 6px;
+}
+.box::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.box::-webkit-scrollbar-track {
+  background-color: #f2f2f2;
+}
+
+.box::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 5px;
+}
+
+.box::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+.box1::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.box1::-webkit-scrollbar-track {
+  background-color: #f2f2f2;
+}
+
+.box1::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 5px;
+}
+
+.box1::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+.textarea {
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none;
+  font-size: 16px;
+  resize: none;
+}
+.textarea1 {
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none;
+  font-size: 16px;
+  resize: none;
+}
+.title {
+  text-align: center;
+  padding: 20px;
+  font-size: 62px;
+  font-weight: bold;
+  color: rgb(15, 15, 15);
+}
+
+.message {
+  text-align: center;
+  padding: 0px;
+  font-size: 24px;
+  color: rgb(92, 88, 88);
+  margin-top: -30px;
+}
+
+.logo {
+  height: 250px;
+  width: 250px;
+  margin-right: 150px;
+  
+  
+}
+.home-image {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+
+.ClearBtn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: whitesmoke;
+  color: black;
+  padding: 20px 30px;
+  border: none;
+  border-radius: 5px;
+  font-size: 20px;
+  cursor: pointer;
+  margin-left:-20px;
+  width: 110px;
+  height: 40px;
+  border: 1px solid black;
+  margin-left: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-top: 15px;
+ 
+}
+.ViewBtn {
+  width: 150px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #555;
+  color: #fff;
+  padding: 20px 30px;
+  border: none;
+  border-radius: 5px;
+  font-size: 20px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-left: 800px;
+  margin-top: -40px;
+  margin-right:-20px;
+  width: 150px;
+  height: 40px;
+}
+.SummarizeBtn {
+  width: 150px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #555;
+  color: #fff;
+  padding: 20px 30px;
+  border: none;
+  border-radius: 5px;
+  font-size: 20px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-left: 1000px;
+  margin-top: -40px;
+  margin-right:-20px;
+  width: 150px;
+  height: 40px;
+}
+
+.BackBtnContainer {
+  display: flex;
+  justify-content: end;
+  align-items: end;
+  padding: 0 20px;
+  margin-top: 20px;
+}
+
+.BackBtn {
+  background-color: #555;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-right: 150px;
+  width: 110px;
+  height: 40px;
+}
+
+@media screen and (max-width: 600px) {
+  .box {
+    height: 400px;
+    width: 90%;
+    margin: 10px auto;
+  }
+}

static/Translation.css

@@ -0,0 +1,140 @@
+body{
+    background-image:url("../static/Images/Background.jpg");
+    background-repeat: no-repeat;
+  background-size: cover;
+}
+.k{
+    display:flex;
+    flex-direction: row;
+    margin-top: 30px;
+}
+.k img{
+    position:relative  ;
+    height: 250px;
+    width: 250px;
+    margin-left: 280px;
+}
+.kk{
+    position: relative;
+    line-height: 0;
+    display:flex;
+    flex-direction: column;
+    margin-left: 100px;
+    margin-top: 50px;
+    color:rgb(17, 17, 17)
+}
+.kk h1{
+    font-size: 65px;
+    white-space: nowrap;
+}
+.kk h5{
+    margin-top: 12px;
+    font-size: 24px;
+    font-weight: 500;
+    white-space: nowrap;
+}
+#lan{
+    border-radius: 5px;
+    margin-top: 10px;
+    width: 350px;
+    height: 45px;
+    font-size: 25px;
+    color: rgb(108, 108, 109);
+}
+.kkk{
+    position:absolute;
+    display: flex;
+    flex-direction:row;
+    margin-top: 150px;
+}
+#type{
+    
+    font-size: 20px;
+    position: relative;
+    resize: none;
+    width: 550px;
+    height: 350px;
+    margin-left: 400px;
+    overflow-y: scroll;
+}
+#out{
+    font-size: 20px;
+    position: relative;
+    resize:none;
+    width:550px;
+    height: 350px;
+    margin-left: 0px;
+    overflow-y: scroll;  
+}
+.kkkk {
+    display: flex;}
+#clear{
+    background-color: rgb(244, 244, 245);
+    font-size: 20px;
+    margin-top: 550px;
+    width: 180px;
+    height: 50px;
+    border-radius: 5px;
+    margin-left: 400px;
+}
+#example{
+    background-color: rgb(244, 244, 245);
+    font-size: 20px;
+    margin-top: 550px;
+    width: 180px;
+    height: 50px;
+    border-radius: 5px;
+    margin-left: 50px;
+}
+#viewData{
+    color: aliceblue;
+    background-color: rgb(85, 81, 81);
+    font-size: 20px;
+    margin-top: 0px;
+    width: 180px;
+    height: 50px;
+    border-radius: 5px;
+    margin-left: 280px;
+    margin-top: 550px;
+}
+#translate{
+    color: aliceblue;
+    background-color: rgb(85, 81, 81);
+    font-size: 20px;
+    margin-top: 0px;
+    width: 180px;
+    height: 50px;
+    border-radius: 5px;
+    margin-left: 50px;
+    margin-top: 550px;
+}
+.backb{
+    position: relative;
+    display: inline-block;
+    background-color: rgb(53, 57, 66);
+    color: white;
+    padding: 9px 30px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 15px;
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
+    margin-left: 1410px;
+    margin-top: 50px;
+    
+}
+#source{
+    white-space: nowrap;
+    float: left;
+    margin-left: 450px;
+    font-size: 25px;
+}
+#target{
+    white-space: nowrap;
+    margin-left: 50px;
+    font-size: 25px;
+}
+form{
+    white-space: nowrap;
+}

static/TranslationTable.css

@@ -0,0 +1,44 @@
+#translation-table {
+    width: 100%;
+  }
+  
+  #translation-table th,
+  #translation-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+  
+  #translation-table th:first-child {
+    border-left: none;
+  }
+  
+  #translation-table th:last-child {
+    border-right: none;
+  }
+  
+  #translation-table th:not(:first-child) {
+    border-left: none;
+    border-right: none;
+  }
+  
+  #translation-table th div {
+    border-bottom: 1px solid #ddd;
+    padding: 8px;
+  }
+  
+  #translation-table td div {
+    padding: 8px;
+  }
+  
+  #translation-table thead th {
+    background-color: #f2f2f2;
+  }
+  
+  #translation-table tbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+  
+  #translation-table tbody tr:hover {
+    background-color: #ddd;
+  }

static/atlassian-connect.json

@@ -0,0 +1,26 @@
+{
+    "name": "Refineverse",
+    "description": "User Story Refinement Plugin",
+    "key": "com.example.myapp",
+    "baseUrl": "https://huggingface.co/spaces/Nik97/Refineverse",
+    "vendor": {
+        "name": "Example, Inc.",
+        "url": "http://example.com"
+    },
+    "authentication": {
+        "type": "none"
+    },
+    "apiVersion": 1,
+    "modules": {
+        "generalPages": [
+            {
+                "url": "/RefineverseDashboardUI.html",
+                "key": "Refineverse-plugin",
+                "location": "system.top.navigation.bar",
+                "name": {
+                    "value": "Refineverse"
+                }
+            }
+        ]
+    }
+}

templates/GenerationTable.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Generation Data</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='GenerationTable.css') }}">
+</head>
+<body>
+  <table id="generation-table">
+    <thead>
+      <tr>
+        <th onclick="sortTable(0)">User Story</th>
+        <th onclick="sortTable(1)">Generated Story</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Use Jinja templates to grab all data from the generation table -->
+      {% for generation in generations %}
+      <tr>
+        <td>{{ generation[0] }}</td>
+        <td>{{ generation[1] }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+
+  <script>
+    // Function to sort the table via its headers in asc/des order
+    function sortTable(columnIndex) {
+        // Initialize variables
+        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+        table = document.getElementById("generation-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/LanguageTranslationUI.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<head>
+    <title>Language Translation</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='Translation.css') }}">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+</head>
+<body>
+
+    <!-- Navigation bar; To go to different pages without having to go back to index/home page -->
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="{{ url_for('index') }}">Home</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+            <div class="navbar-nav">
+              <a class="nav-link active" href="{{ url_for('text_summarization') }}">Summarization</a>
+              <a class="nav-link" href="{{ url_for('project_breakdown') }}">Task Breakdown</a>
+              <a class="nav-link" aria-current="page" href="{{ url_for('language_translation') }}">Translation</a>
+              <a class="nav-link" href="{{ url_for('text_generation') }}">Generation</a>
+            </div>
+          </div>
+        </div>
+      </nav>
+    
+    <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="Enter your user story here!">{{ 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="example" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="As a _ , I want to _ so that _ / 作为__ , 我想要__以便__。 / Sebagai__, saya mahu__supaya__. / என__, எனக்கு வேண்டும்__அதனால்__. / ในฐานะ__, ฉันต้องการ__เพื่อที่ฉัน__.">Example Formats</button>
+            <button id="viewData" type="button" class="btn btn-primary" onclick="openPopup()">View History</button>
+            <button id="translate" type="submit">Translate</button>
+        </div>
+    </form>
+
+<div class="back">
+    <a href="{{ url_for('index') }}"><button class="backb">Back</button></a>
+</div>
+
+<!-- Bootstrap JS Bundle -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+<script>
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+
+    // Function for cleaning content in textboxes
+    function clearContent()
+    {
+        const type = document.getElementById('type');
+        const out = document.getElementById('out');
+        type.value = '';
+        out.value = '';
+    }
+
+    // Function to open a popup window using Flask routing
+    function openPopup() {
+        // The second argument is used to give the window a name
+        window.open('/translation_table', 'translation_table', 'width=600,height=400');
+      }
+</script>
+    
+</body>
+</html>

templates/ProjectBreakdownUI.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Project Task Breakdown</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='ProjectBreakdown.css') }}">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+  </head>
+  <body>
+
+    <!-- Navigation bar; To go to different pages without having to go back to index/home page -->
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="{{ url_for('index') }}">Home</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+          <div class="navbar-nav">
+            <a class="nav-link active" href="{{ url_for('text_summarization') }}">Summarization</a>
+            <a class="nav-link" aria-current="page" href="{{ url_for('project_breakdown') }}">Task Breakdown</a>
+            <a class="nav-link" href="{{ url_for('language_translation') }}">Translation</a>
+            <a class="nav-link" href="{{ url_for('text_generation') }}">Generation</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+    
+    <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>
+
+          <!-- This uses Jinja templating to get all flash messages to be displayed -->
+          <!-- 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>
+
+          <tbody id="breakdown-body">
+            <!-- Uses a for-loop to grab all contents from the breakdown table -->
+            {% for row in rows %}
+            <tr>
+              <!-- Return and display output from Refineverse.py based on routing from BreakdownFeature.py -->
+              <td>{{ row[0] }}</td>
+              <td>{{ row[1] }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </main>
+
+    <!-- Back button -->
+    <div class="back-Btn-Container">
+      <div class="buttons-container">
+        <a href="{{ url_for('index') }}"><button class="back-btn">Back</button></a>
+      </div>
+    </div>
+
+    <!-- Bootstrap JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <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

@@ -0,0 +1,57 @@
+<!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="con1">    
+    <div class="trdl">
+        <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">
+            
+        </div>
+    <div class="tc1">
+        <div class="texts1">
+            <h2>User Story 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>
+        <div class="buttonc">
+                <a href="{{url_for('text_summarization')}}" class="button1">User Story Summarization</a>
+                <a href="{{url_for('project_breakdown')}}" class="button2">Project Task Breakdown</a>
+        </div>
+    </div>
+    <div class="trd2">
+        <div class="pic1">
+            <img src="{{url_for('static', filename='Images/Language Translation.jpg')}}" alt="cant find picture" class="p3">
+            <img src="{{url_for('static', filename='Images/Text Generation logo.png')}}" alt="cant find picture" class="p4">
+        </div>
+    <div class="tc2">
+        <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 class="texts4">
+                <h2>User Story Generation</h2>
+                <p id="t">With our plugin's advanced natural language processing capabilities, our User Story Generation feature provides a powerful solution for agile teams seeking to streamline their project and user story refinement process. With our User Story Generation feature, you can easily create new user stories via a single prompt, and the feature will generate a suggested user story for you. Farewell to the hassle of manual user story creation!</p>
+        </div>
+    </div>   
+        <div class="buttonc1">
+            <a href="{{url_for('language_translation')}}" class="button3">Language Translation</a>
+            <a href="{{url_for('text_generation')}}" class="button4">User Story Generation</a>
+        </div>
+    </div>
+</div>
+    </body>
+</html>

templates/SummarizationTable.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Summarization Data</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='SummarizationTable.css') }}">
+</head>
+<body>
+  <table id="summarization-table">
+    <thead>
+      <tr>
+        <th onclick="sortTable(0)">User Story</th>
+        <th onclick="sortTable(1)">Summary</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Use Jinja template to grab all data from the summarization table -->
+      {% for summarization in summarizations %}
+      <tr>
+        <td>{{ summarization[0] }}</td>
+        <td>{{ summarization[1] }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+
+  <script>
+    // Function to sort the table via its headers in asc/des order
+    function sortTable(columnIndex) {
+        // Initialize variables
+        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+        table = document.getElementById("summarization-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/TextGenerationUI.html

@@ -0,0 +1,105 @@
+<!-- jinja2 template engine coding style for flask framework -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>User Story Generation</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='TextGeneration.css') }}">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+  </head>
+  <body>
+
+    <!-- Navigation bar; To go to different pages without having to go back to index/home page -->
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="{{ url_for('index') }}">Home</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+          <div class="navbar-nav">
+            <a class="nav-link active" aria-current="page" href="{{ url_for('text_summarization') }}">Summarization</a>
+            <a class="nav-link" href="{{ url_for('project_breakdown') }}">Task Breakdown</a>
+            <a class="nav-link" href="{{ url_for('language_translation') }}">Translation</a>
+            <a class="nav-link" href="{{ url_for('text_generation') }}">Generation</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+    
+    <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">User Story Generation</label>
+        <p class="message">
+          Generate brand new user stories with a prompt.
+        </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 generated output goes here!" readonly>{{ generatedStory }}</textarea>
+        </div>
+        <div class="buttons-container">
+          <button class="ClearBtn" type="button" onclick="clearTextareas()">Clear</button>
+          <button class="ViewBtn" type="button" onclick="openPopup()">View History</button>
+          <button class="GenerateBtn" type="submit">Generate</button>
+        </div>
+      </form>
+    </div>
+
+    <div class="messages-container">
+      <!-- This uses Jinja templating to get all flash messages to be displayed -->
+      {% 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>
+
+    <!-- Bootstrap JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <script>
+      // Function for cleaning content in textboxes
+      function clearTextareas()
+      {
+        document.getElementById('input_textarea').value = '';
+        document.getElementById('output_textarea').value = '';
+      }
+
+      // Function to open a popup window using Flask routing
+      function openPopup() {
+        // The second argument is used to give the window a name
+        // This is necessary to target it with JavaScript code!
+        window.open('/generation_table', 'generation_table', 'width=600,height=400');
+      }
+    </script>
+  </body>
+</html>

templates/TextSummarizationUI.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Text Summarization</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='TextSummarization.css') }}">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+  </head>
+  <body>
+
+    <!-- Navigation bar; To go to different pages without having to go back to index/home page -->
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="{{ url_for('index') }}">Home</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+          <div class="navbar-nav">
+            <a class="nav-link active" aria-current="page" href="{{ url_for('text_summarization') }}">Summarization</a>
+            <a class="nav-link" href="{{ url_for('project_breakdown') }}">Task Breakdown</a>
+            <a class="nav-link" href="{{ url_for('language_translation') }}">Translation</a>
+            <a class="nav-link" href="{{ url_for('text_generation') }}">Generation</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+    
+    <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">User Story 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="ViewBtn" type="button" onclick="openPopup()">View History</button>
+          <button class="SummarizeBtn" type="submit">Summarize</button>
+        </div>
+      </form>
+    </div>
+
+    <div class="messages-container">
+      <!-- This uses Jinja templating to get all flash messages to be displayed -->
+      {% 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>
+
+    <!-- Bootstrap JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <script>
+      // Function for cleaning content in textboxes
+      function clearTextareas()
+      {
+        document.getElementById('input_textarea').value = '';
+        document.getElementById('output_textarea').value = '';
+      }
+
+      // Function to open a popup window using Flask routing
+      function openPopup() {
+        // The second argument is used to give the window a name
+        window.open('/summarization_table', 'summarization_table', 'width=600,height=400');
+      }
+    </script>
+  </body>
+</html>

templates/TranslationTable.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Translation Data</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='TranslationTable.css') }}">
+</head>
+<body>
+  <table id="translation-table">
+    <thead>
+      <tr>
+        <th onclick="sortTable(0)">User Story</th>
+        <th onclick="sortTable(1)">Translation</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Use Jinja templates to grab all data from the translation table -->
+      {% for translation in translations %}
+      <tr>
+        <td>{{ translation[0] }}</td>
+        <td>{{ translation[1] }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+
+  <script>
+    // Function to sort the table via its headers in asc/des order
+    function sortTable(columnIndex) {
+        // Initialize variables
+        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+        table = document.getElementById("translation-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>