Spaces:

gefiwek187
/

echoadvance2

Sleeping

App Files Files Community

gefiwek187 commited on Aug 29, 2024

Commit

72bd161

verified ·

1 Parent(s): 3230dd7

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +300 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,300 @@

+<html><head><base href="echo.iamwomen.cloudns.be">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Echo: Advanced AI Research Agent</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap');
+  :root {
+    --text-color: #f0f0f0;
+    --primary-color: #6a11cb;
+    --secondary-color: #2575fc;
+    --overlay-color: rgba(0, 0, 0, 0.6);
+  }
+  body, html {
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    color: var(--text-color);
+    height: 100%;
+    overflow: hidden;
+    background-color: #0f0f1a;
+  }
+  .background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=pexels-pixabay-531880.jpg&fm=jpg');
+    background-size: cover;
+    background-position: center;
+    filter: brightness(0.6) saturate(1.2);
+    z-index: -2;
+  }
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, var(--overlay-color), rgba(0, 0, 0, 0.8));
+    z-index: -1;
+  }
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .title-container {
+    text-align: center;
+    margin-bottom: 60px;
+    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+  .title {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 5em;
+    font-weight: 700;
+    margin: 0;
+    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    letter-spacing: 2px;
+  }
+  .tagline {
+    font-size: 1.4em;
+    margin-top: 15px;
+    color: var(--text-color);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+    font-weight: 300;
+    letter-spacing: 1px;
+  }
+  .query-container {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 30px;
+    width: 80%;
+    max-width: 600px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  #query-input {
+    width: 100%;
+    padding: 15px 20px;
+    border: none;
+    border-radius: 30px;
+    background-color: rgba(255, 255, 255, 0.15);
+    color: var(--text-color);
+    font-size: 1.1em;
+    transition: all 0.3s ease;
+    margin-bottom: 25px;
+  }
+  #query-input:focus {
+    outline: none;
+    box-shadow: 0 0 15px rgba(106, 17, 203, 0.5);
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  #submit-btn {
+    padding: 14px 50px;
+    border: none;
+    border-radius: 30px;
+    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+    color: white;
+    font-size: 1.2em;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+  #submit-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(106, 17, 203, 0.6);
+  }
+  #submit-btn:active {
+    transform: translateY(1px);
+    box-shadow: 0 3px 10px rgba(106, 17, 203, 0.4);
+  }
+  .result-container {
+    margin-top: 40px;
+    width: 80%;
+    max-width: 800px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 30px;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+  }
+  .result-container.show {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  #result {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    font-size: 1.1em;
+    line-height: 1.6;
+  }
+  .loading {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    margin-top: 30px;
+  }
+  .loading-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: var(--secondary-color);
+    margin: 0 8px;
+    animation: loading 1.5s infinite ease-in-out;
+  }
+  .loading-dot:nth-child(2) {
+    animation-delay: 0.5s;
+    background-color: var(--primary-color);
+  }
+  .loading-dot:nth-child(3) {
+    animation-delay: 1s;
+  }
+  @keyframes loading {
+    0%, 100% { transform: scale(1); opacity: 0.5; }
+    50% { transform: scale(1.5); opacity: 1; }
+  }
+  @media (max-width: 768px) {
+    .title {
+      font-size: 3.5em;
+    }
+    .tagline {
+      font-size: 1.2em;
+    }
+    .query-container, .result-container {
+      width: 90%;
+    }
+  }
+</style>
+</head>
+<body>
+  <div class="background"></div>
+  <div class="overlay"></div>
+  <div class="container">
+    <div class="title-container">
+      <h1 class="title">Echo</h1>
+      <p class="tagline">Your Advanced AI Research Companion</p>
+    </div>
+    <div class="query-container">
+      <input type="text" id="query-input" placeholder="Ask Echo a question...">
+      <button id="submit-btn">Research</button>
+    </div>
+    <div class="loading">
+      <div class="loading-dot"></div>
+      <div class="loading-dot"></div>
+      <div class="loading-dot"></div>
+    </div>
+    <div class="result-container">
+      <pre id="result"></pre>
+    </div>
+  </div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
+  <script>
+    const queryInput = document.getElementById('query-input');
+    const submitBtn = document.getElementById('submit-btn');
+    const resultContainer = document.querySelector('.result-container');
+    const result = document.getElementById('result');
+    const loading = document.querySelector('.loading');
+    const queryContainer = document.querySelector('.query-container');
+    const titleContainer = document.querySelector('.title-container');
+    async function getEchoResponse(query) {
+      try {
+        const response = await fetch('/research', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ query: query }),
+        });
+        const data = await response.json();
+        return data.result;
+      } catch (error) {
+        console.error('Error fetching response:', error);
+        return 'I apologize, but I encountered an error while processing your request.';
+      }
+    }
+    submitBtn.addEventListener('click', async () => {
+      const query = queryInput.value.trim();
+      if (query) {
+        titleContainer.style.opacity = '0';
+        titleContainer.style.transform = 'translateY(-100px)';
+        queryContainer.style.transform = 'translateY(-120px) scale(0.9)';
+        loading.style.display = 'flex';
+        resultContainer.classList.remove('show');
+        result.textContent = '';
+        const echoResponse = await getEchoResponse(query);
+        loading.style.display = 'none';
+        resultContainer.classList.add('show');
+        result.textContent = echoResponse;
+        // Animate typing effect
+        result.textContent = '';
+        let i = 0;
+        const typeWriter = () => {
+          if (i < echoResponse.length) {
+            result.textContent += echoResponse.charAt(i);
+            i++;
+            setTimeout(typeWriter, 10);
+          }
+        };
+        typeWriter();
+      }
+    });
+    queryInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        submitBtn.click();
+      }
+    });
+    // Add particle effect
+    const particlesContainer = document.createElement('div');
+    particlesContainer.id = 'particles-js';
+    particlesContainer.style.position = 'fixed';
+    particlesContainer.style.top = '0';
+    particlesContainer.style.left = '0';
+    particlesContainer.style.width = '100%';
+    particlesContainer.style.height = '100%';
+    particlesContainer.style.zIndex = '-1';
+    document.body.appendChild(particlesContainer);
+    const script = document.createElement('script');
+    script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
+    script.onload = () => {
+      particlesJS('particles-js', {
+        particles: {
+          number: { value: 80, density: { enable: true, value_area: 800 } },
+          color: { value: '#ffffff' },
+          shape: { type: 'circle' },
+          opacity: { value: 0.5, random: true },
+          size: { value: 3, random: true },
+          line_linked: { enable: true, distance: 150, color: '#ffffff', opacity: 0.4, width: 1 },
+          move: { enable: true, speed: 2, direction: 'none', random: true, out_mode: 'out' }
+        },
+        interactivity: {
+          detect_on: 'canvas',
+          events: { onhover: { enable: true, mode: 'grab' }, onclick: { enable: true, mode: 'push' } },
+          modes: { grab: { distance: 140, line_linked: { opacity: 1 } }, push: { particles_nb: 4 } }
+        },
+        retina_detect: true
+      });
+    };
+    document.body.appendChild(script);
+  </script>
+</body></html>