Spaces:

nonprof
/

gemini_counsellor

Configuration error

App Files Files Community

gemini_counsellor / templates /index.html

GowthamYarlagadda

Upload 9 files

c615b80 verified 4 months ago

raw

history blame

5.66 kB

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Demonstration of Gemini API in a Python Flask Application.">

	<title>IBA Chatbot</title>
	<link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='images/iba_logo.png') }}">
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
	<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=Manrope:wght@300;400;600&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1yTLwNiCZhIdCWolQldwq4spHQkgZDqkG">
	<style>
	body {
	font-family: 'Manrope', sans-serif;
	margin: 0 auto 40px;
	background-color: #101626;
	color: #fff;
	}

	.skeleton1,
	.skeleton2,
	.skeleton3 {
	min-height: 18px;
	padding: 10px;
	border-radius: 4px;
	background-size: 40px 100%;
	background-repeat: no-repeat;
	background-position: left -40px top 0;
	animation: shine 1s ease infinite;
	}

	.skeleton1 {
	background-color: #101626;
	width: 70%;
	}

	.skeleton2 {
	background-color: #e2e5e7;
	width: 50%;
	}

	.skeleton3 {
	background-color: #e2e5e7;
	width: 60%;
	}

	@keyframes shine {
	to {
	background-position: right -40px top 0;
	}
	}
	</style>

	</head>

	<body class="w-lg-50 w-md-75 w-sm-100 py-3">
	<main class="flex-shrink-0">
	<div>
	<br>
	<br>
	<h1 class="mt-3">Gemini AI Model - Free Chatbot</h1>
	<p>This project is based on the free Gemini API recently released by Google. <span style="font-weight: bold;">60 queries per minute</span>. For more information, visit my <a href="https://medium.com/@fareedkhandev" target="_blank">Profile</a>.</p>

	<br>

	<div id="list-group" style="background-color: #101626;" class="list-group w-auto">
	</div>

	<div class="input-group w-lg-50 w-md-75 w-sm-100 p-3 fixed-bottom" style="margin: 0 auto; ">
	<input type="text" class="form-control" id="chat-input"
	style="background-color: #3A4556; border: #3A4556; color: #fff;">
	<div class="input-group-append">
	<button id="gpt-button"
	style="background-color: #140b9d; color: white; border-radius: 0 5px 5px 0;" class="btn">Ask Gemini</button>
	</div>
	</div>
	</div>
	</main>

	<script src="https://code.jquery.com/jquery-3.6.3.min.js"
	integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">
	</script>

	<script>
	$("#gpt-button").click(function () {
	var question = $("#chat-input").val();
	let html_data = '';
	html_data += `<a style="margin-top:-10px; background-color:#3A4556; border:none; color:white;"
	class="list-group-item list-group-item-action d-flex gap-3 py-3">
	<img
	src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars-thumbnail.png"
	alt="twbs" width="32" height="32"
	class="rounded-circle flex-shrink-0">
	<div class="d-flex gap-2 w-100 justify-content-between">
	<div>
	<p class="mb-0 opacity-75">${question}</p>
	</div>
	</div>
	</a>

	<div id="response"></div>`;
	$("#chat-input").val("");

	$("#list-group").append(html_data);
	$('div#response:last').html(`
	<!-- code here -->
	<div class="py-3" id="ok-good">
	<h2 class="skeleton1"></h2>
	<h2 class="skeleton2"></h2>
	<h2 class="skeleton3"></h2>
	</div>`);
	if ($("#ok-good").length) {
	$('html, body').animate({
	scrollTop: $("#ok-good").offset().top
	}, 100);
	}

	$.ajax({
	type: "POST",
	url: "/",
	data: {
	'prompt': question
	},
	success: function (data) {
	let gpt_data = '';
	gpt_data += `<a style="background-color:#202835; border:black;" href="#"
	class="list-group-item list-group-item-action d-flex gap-3 py-3">
	<img src="{{ url_for('static', filename='images/iba_logo.png') }}" alt="twbs" width="32" height="32"
	class="rounded-circle flex-shrink-0">
	<div class="d-flex gap-2 w-100 justify-content-between">
	<div>
	<p id="typing-demo" class="mb-0 opacity-75 text-white"></p>
	</div>
	</div>
	</a><br>`;

	$("#list-group").append(gpt_data);
	$('div#response:last').html('');

	var i = 0;
	var speed = 5;

	function typeWriter() {
	if (i < data.length) {
	$("p#typing-demo:last").text($("p#typing-demo:last").text() + data.charAt(i));
	i++;
	setTimeout(typeWriter, speed);
	}
	}

	typeWriter();
	}
	});
	});
	</script>
	</body>

	</html>