Upload 2 files

static/appS.css

@@ -0,0 +1,365 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100vh;
+    width: 100vw;
+    font-family: sans-serif;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+}
+.drag-active {
+  background-color: rgba(0, 150, 255, 0.1) !important;
+  border: 2px dashed #1ec9f3 !important;
+}
+header {
+    flex: 0 0 17vh;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 0 20px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+header img {
+    height: 18vh;
+    width: 5vw;
+    object-fit: cover;
+}
+
+header span {
+    font-size: 30px;
+}
+
+em {
+    color: rgb(42, 42, 248);
+}
+
+.convo {
+    height: 65vh;
+    overflow-y: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    scroll-behavior: smooth;
+   flex: 1;
+    
+}
+
+.select-options{
+  display: flex;
+  flex-direction: column;
+  height: 5vh;
+  width: 10vw;
+}
+ 
+  .select-options li {
+    margin-bottom: 8px;
+  }
+  
+  .select-options input[type="checkbox"] {
+    display: none;
+  }
+  
+  .select-options label {
+    position: relative;
+    padding-left: 30px;
+    cursor: pointer;
+    display: block;
+  }
+  
+  .select-options .check {
+    position: absolute;
+    left: 10px;
+    top: 0px;
+    height: 17px;
+    width: 17px;
+    background-color: #e0e0e0;
+    border-radius: 50%;
+  }
+  
+  .select-options input:checked + .check {
+    background-color: #6a6b6a;
+    box-shadow: inset 0 0 0 4px white;
+  }
+
+.bubble {
+    max-width: 90%;
+    padding: 16px;
+    font-size: 1.05rem;
+    border-radius: 14px;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+
+.bubble .label  {
+    font-size: 0.9rem;
+    font-weight: bold;
+    margin-bottom: 6px;
+}
+
+.bubble.left {
+    align-self: flex-start;
+    background-color: #a7e9af;
+    color: black;
+    border: 2px solid #3b7a57;
+}
+
+.bubble.right {
+    align-self: flex-end;
+    background-color: #1ec9f3;
+    color: white;
+    border: 2px solid #0080c0;
+}
+
+.qtdoc  {
+    flex: 0 0 auto;
+    padding: 40px 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
+}
+
+.qt  {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #b5b4b4;
+    border-radius: 10px;
+    margin-right: 10px;
+    padding: 0 10px;
+    height: 50px;
+}
+.SummarizeInput,
+.CaptionInput {
+  position: absolute;
+  width: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #b5b4b4;
+  border-radius: 10px;
+  padding: 0 15px;
+  height: 50px;
+}
+.qt input {
+    width: 70%;
+    height: 70%;
+    border: none;
+    background-color: #b5b4b4;
+    color: white;
+    font-size: 16px;
+}
+
+.LengthS ,
+.selectImg{
+    display: flex;
+    align-items: center;
+    gap: 30px;
+    color: black;
+    font-size: 16px;
+    width: auto;
+  }
+  
+  .LengthS p ,
+  .selectImg p{
+    margin: 0;
+    white-space: nowrap;
+  }
+.select-optionsS {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex-direction: row;
+    gap: 20%;
+}
+.SummuririzeButtons,
+.captionButtons{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 50px;
+    cursor: pointer;
+}
+.select-optionsS li label {
+    display: inline-flex;
+    align-items: center;
+    gap: 20px; 
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+  }
+.select-optionsS li{
+    display: flex;
+    font-display: row;
+    align-items: center;
+}
+.select-options input[type="radio"] {
+    accent-color: #555; 
+    vertical-align: middle; 
+
+}
+.qt input::placeholder {
+    color: white;
+}
+
+.qt input:focus {
+    outline: none;
+}
+
+.icons {
+    display: flex;
+    gap: 40px;
+    font-size: 20px;
+    color: white;
+    align-items: center;
+    cursor: pointer;
+}
+
+.sendingQA {
+    background-color: #3b82f6;
+    color: white;
+    padding: 10px 15px;
+    border-radius: 8px;
+    cursor: pointer;
+    border: none;
+    font-size: 16px;
+}
+
+.sendingQA:hover {
+    background-color: #2563eb;
+}
+
+.audio-toggle {
+    margin-left: 10px;
+    cursor: pointer;
+    color: #007BFF;
+}
+
+.audio-toggle:hover {
+    color: #0056b3;
+}
+
+.answer-block {
+    background-color: #e1f7e1;
+    border-radius: 10px;
+    padding: 1rem;
+    margin: 1rem;
+}
+
+.file-preview-bubble {
+    align-self: flex-start;
+    background-color: #f2f2f2;
+    color: #444;
+    font-size: 0.8rem;
+    padding: 6px 10px;
+    border-radius: 10px;
+    max-width: 50%;
+    font-family: monospace;
+    box-shadow: inset 0 0 2px #aaa;
+    margin: -5px 0 6px 0;  
+    opacity: 0.9;
+}
+.audio-toggle {
+    margin-left: 10px;
+    cursor: pointer;
+    color: #007BFF;
+}
+
+.audio-toggle:hover {
+    color: #0056b3;
+}
+.reset-chat {
+  background-color: #ef4444;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.reset-chat:hover {
+  background-color: #dc2626;
+}
+
+.convo.drag-over {
+  outline: 2px dashed #3b82f6;
+  background-color: #e0f2fe;
+}
+
+
+.explainChoix{
+    position: absolute;
+    height: 10vh;
+    width: 20vw;
+    background-color: #6adcf9;
+    border-radius: 20px;
+    top: 17vh;
+    left: 10vw;
+    display: flex;
+    flex-direction: column;
+    gap: 5%;
+    align-items: flex-end;
+    opacity: 0.8;
+    transition: 3s ease-in-out;
+}
+.explainChoix span {
+    padding-top: 2%;
+    padding-left: 10px;
+    color: black;
+    font-size: 13px;
+}
+.explainChoix button{
+    background-color: white;
+    color: black;
+    font-size: 10px;
+    height: 30%;
+    width: 17%;
+    border-radius: 10px;
+    cursor: pointer;
+    margin-right: 15px;
+    margin-bottom: 15px;
+}
+
+.fade-in {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+}
+
+.fade-in.active {
+    opacity: 0.8;
+    transform: translateY(0);
+}
+
+.fade-in.delay-1 { transition-delay: 0.5s; }
+.fade-in.delay-2 { transition-delay: 0.7s; }
+.fade-in.delay-3 { transition-delay: 0.9s; }
+
+
+
+.active{
+    opacity: 1;
+    pointer-events: all;
+    z-index: 2;
+}
+.innactive{
+    opacity: 0;
+    pointer-events: none;
+    z-index: 1;
+
+}
+
+.return i{
+    font-size: 25px;
+}

static/appS.js

@@ -0,0 +1,82 @@
+
+
+  document.addEventListener('DOMContentLoaded', () => {
+   var GotitB = document.querySelector(".explainChoix button")
+var explain = document.querySelector(".explainChoix")
+var SummarizeInput = document.querySelector(".SummarizeInput")
+var CaptionInput = document.querySelector(".CaptionInput")
+GotitB.addEventListener("click",()=>{
+   explain.style.opacity="0"
+})
+
+document.querySelectorAll('.select-options input[type="radio"]').forEach(radio => {
+    radio.addEventListener('change', (e) => {
+      if (e.target.checked) {
+        const selectedValue = e.target.value;
+        if(selectedValue=="Summarize"){
+          SummarizeInput.classList.add("active")
+          SummarizeInput.classList.remove("innactive")
+          CaptionInput.classList.remove("active")
+          CaptionInput.classList.add("innactive")
+        }
+        else{
+          SummarizeInput.classList.add("innactive")
+          SummarizeInput.classList.remove("active")
+          CaptionInput.classList.remove("innactive")
+          CaptionInput.classList.add("active")
+        }
+      }
+    });
+  });
+    const fileUpload = document.getElementById('file-upload');
+    const imageUpload = document.getElementById('image-upload');
+    
+    // Get the icon buttons
+    const fileBtn = document.getElementById('file-btn');
+    const imageBtn = document.getElementById('image-btn');
+    
+    // Set up file input for documents (PDF, DOCX, PPTX, XLSX)
+    fileBtn.addEventListener('click', () => {
+      fileUpload.click();
+    });
+    
+    fileUpload.addEventListener('change', (e) => {
+      if (e.target.files.length > 0) {
+        const file = e.target.files[0];
+        const validDocTypes = [
+          'application/pdf',
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+          'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        ];
+        
+        if (validDocTypes.includes(file.type)) {
+          console.log('Valid document selected:', file.name);
+          // Handle the document file here
+        } else {
+          alert('Please select a valid document (PDF, DOCX, PPTX, or XLSX)');
+          fileUpload.value = ''; // Reset the input
+        }
+      }
+    });
+    
+    // Set up file input for images
+    imageBtn.addEventListener('click', () => {
+      imageUpload.click();
+    });
+    
+    imageUpload.addEventListener('change', (e) => {
+      if (e.target.files.length > 0) {
+        const file = e.target.files[0];
+        const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+        
+        if (validImageTypes.includes(file.type)) {
+          console.log('Valid image selected:', file.name);
+          // Handle the image file here
+        } else {
+          alert('Please select a valid image (JPEG, PNG, GIF, or WEBP)');
+          imageUpload.value = ''; // Reset the input
+        }
+      }
+    });
+  });