chatbot/main.html at main · 21pravi/chatbot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
# -*- coding: utf-8 -*-
"""main.html

Automatically generated by Colab.

Original file is located at
    https://colab.research.google.com/drive/10adt3gEnL6ahht1GunhER2XtPsPMMEKE

###Main.html
"""

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Try Our AI Assistant</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: "Source Code Pro", monospace;
      font-optical-sizing: auto;
      margin: 0;
      background-color: #1C1E53;
      color: #fff;
    }
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 100vh;
      padding: 0 20px;
    }
    .text-container {
      flex: 1;
      padding-right: 20px;
      animation: fadeIn 1s ease-out;
    }
    .gif-container {
      flex: 1;
      text-align: center;
      animation: bounce 1s infinite alternate;
    }
    h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: #F9A825;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }
    #try-clara-btn {
      background: linear-gradient(to right, #6d15d5, #43cea2);
      border: none;
      border-radius: 6px;
      padding: 12px 24px;
      color: white;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      align-self: flex-end;
      box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, .12), 0px 1px 1px rgba(0, 0, 0, .26);
      transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
      animation: pulse 1s infinite alternate;
    }
    #try-clara-btn:hover {
      box-shadow: 0 14px 26px -12px rgba(79, 45, 227, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(79, 45, 227, 0.2);
      transform: translateY(-2px);
    }
    .btn-text {
      margin-right: 15px;
    }
    .btn-icon {
      position: absolute;
      right: 24px;
      opacity: 0;
      transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    }
    #try-clara-btn:hover .btn-icon {
      transform: translateX(3px);
      opacity: 1;
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    @keyframes bounce {
      from {
        transform: translateY(-20px);
      }
      to {
        transform: translateY(0);
      }
    }
    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
      100% {
        transform: scale(1);
      }
    }
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
        align-items: center;
      }
      .gif-container {
        margin-top: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="text-container">
      <h1>Meet Gemini Chatbot</h1>
      <p>Our AI assistant is ready to help you. We present Gemini, a family of highly capable multimodal models developed at Google. We trained Gemini jointly across image, audio, video, and text data for the purpose of building a model with both strong generalist capabilities across modalities alongside cutting-edge understanding and reasoning performance in each respective domain. Gemini models build on top of Transformer decoders that are enhanced with improvements in architecture and model optimization to enable stable training at scale and optimized inference on Google’s Tensor Processing Units.</p>
      <button id="try-clara-btn">
        <span class="btn-text">Try Gemini Chatbot</span>
        <svg class="btn-icon" viewBox="0 0 13 10" height="10px" width="15px">
          <path d="M1,5 L11,5"></path>
          <polyline points="8 1 12 5 8 9"></polyline>
        </svg>
      </button>
    </div>
    <div class="gif-container">
      <img src="{{ url_for('static', filename='assist.gif') }}" alt="Gemini Chatbot">
    </div>
  </div>
  <script>
    const btn = document.getElementById("try-clara-btn");
    btn.addEventListener("mouseenter", () => {
      btn.style.animation = "none";
    });
    btn.addEventListener("mouseleave", () => {
      btn.style.animation = "pulse 1s infinite alternate";
    });
    btn.addEventListener("click", () => {
      window.location.href = "/chat";
    });
  </script>
</body>
</html>