Spaces:

Dooratre
/

db-test

Running

App Files Files Community

db-test / index.html

Dooratre

Update index.html

0a28f3e verified 3 months ago

raw

history blame contribute delete

7.85 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Modern AI Chat</title>
	<style>
	/* Import Fonts */
	@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600&family=Poppins:wght@400;600&display=swap');

	/* Highlight Title Styling for AI Response */
	.highlight-title {
	font-size: 1rem; /* Adjust for mobile */
	font-weight: 700; /* Extra bold */
	color: #000; /* Black text */
	display: inline-block;
	margin: 5px 0; /* Add some spacing if needed */
	}

	/* Fullscreen Responsive Styling */
	body {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	background: linear-gradient(135deg, #6E45E2, #88D3CE);
	height: 100vh; /* Full height */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	}

	/* Animation Background */
	body::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(98, 0, 234, 0.6), transparent);
	animation: backgroundAnimation 6s infinite linear alternate;
	z-index: 0;
	}

	@keyframes backgroundAnimation {
	to {
	transform: rotate(360deg);
	}
	}

	.chat-container {
	position: relative;
	z-index: 1;
	width: 100%; /* Full width for mobile */
	height: 100%; /* Full height for mobile */
	background: #ffffff;
	border-radius: 15px 15px 0 0; /* Rounded top corners */
	box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	}

	@keyframes fadeIn {
	from {
	opacity: 0;
	transform: translateY(30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	/* Header */
	.chat-header {
	background: linear-gradient(135deg, #6200ea, #3700b3);
	color: #fff;
	padding: 15px; /* Adjusted padding for mobile */
	text-align: center;
	font-size: 1.2rem; /* Adjusted for mobile */
	font-weight: bold;
	font-family: 'Cairo', sans-serif;
	border-bottom: 1px solid #ddd;
	}

	/* Chat Box */
	.chat-box {
	flex: 1;
	padding: 10px 15px; /* Smaller padding for mobile */
	overflow-y: auto; /* Enable vertical scrolling */
	max-height: calc(100vh - 140px); /* Dynamic height */
	display: flex;
	flex-direction: column;
	background: #f8f9fa;
	}

	.chat-box .message {
	margin-bottom: 10px; /* Reduced margin for compact spacing */
	font-size: 0.9rem; /* Adjusted for mobile */
	padding: 10px 15px;
	border-radius: 20px;
	max-width: 75%;
	animation: slideIn 0.3s ease-in-out;
	word-wrap: break-word;
	font-family: 'Cairo', 'Poppins', sans-serif;
	}

	@keyframes slideIn {
	from {
	transform: translateY(10px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}

	.chat-box .message.user {
	margin-left: auto;
	background: #e3f2fd;
	color: #0D47A1;
	text-align: right;
	}

	.chat-box .message.ai {
	margin-right: auto;
	background: #e8f5e9;
	color: #1B5E20;
	text-align: left;
	}

	/* Typing Animation */
	.typing-animation {
	display: flex;
	margin: 10px 0;
	justify-content: left;
	align-items: center;
	}

	.typing-animation span {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 3px;
	background: #1B5E20;
	border-radius: 50%;
	animation: typing 1.3s infinite;
	}

	.typing-animation span:nth-child(2) {
	animation-delay: 0.2s;
	}

	.typing-animation span:nth-child(3) {
	animation-delay: 0.4s;
	}

	@keyframes typing {
	0%, 80% {
	transform: scale(0);
	}
	40% {
	transform: scale(1);
	}
	}

	/* Chat Input */
	.chat-input {
	display: flex;
	align-items: center;
	padding: 10px; /* Reduced padding for mobile */
	background: #f9f9f9;
	border-top: 1px solid #ddd;
	}

	.chat-input input {
	flex: 1;
	padding: 12px; /* Adjusted for smaller screens */
	border: 1px solid #ddd;
	border-radius: 30px;
	margin-right: 10px;
	font-size: 0.9rem; /* Smaller size for mobile */
	font-family: 'Poppins', 'Cairo', sans-serif;
	outline: none;
	transition: all 0.3s ease;
	}

	.chat-input input:focus {
	border-color: #6200ea;
	box-shadow: 0 0 5px rgba(98, 0, 234, 0.5);
	}

	.chat-input button {
	padding: 10px 15px; /* Adjusted for mobile */
	background: linear-gradient(135deg, #6200ea, #3700b3);
	border: none;
	color: white;
	border-radius: 20px;
	cursor: pointer;
	font-weight: bold;
	font-size: 0.9rem; /* Adjusted for mobile */
	font-family: 'Poppins', 'Cairo', sans-serif;
	transition: all 0.3s ease;
	}

	.chat-input button:hover {
	background: #5e35b1;
	box-shadow: 0 5px 15px rgba(98, 0, 234, 0.4);
	}
	</style>
	</head>
	<body>
	<div class="chat-container">
	<div class="chat-header">
	AI Chat with Omar's Smart Model
	</div>
	<div class="chat-box" id="chat-box">
	<!-- Chat messages will populate here -->
	</div>
	<div class="chat-input">
	<input type="text" id="user-input" placeholder="Type a message..." autocomplete="off">
	<button id="send-btn">Send</button>
	</div>
	</div>
	<script>
	const apiUrl = "https://dooratre-test-flask-space.hf.space/chat";

	const chatBox = document.getElementById("chat-box");
	const userInput = document.getElementById("user-input");
	const sendBtn = document.getElementById("send-btn");

	// Initialize conversation history
	let conversationHistory = [
	{ "role": "system", "content": "you are AI model created and developed By MR Omar Nuwara In CORVO AI Company you are model name ALEX-9 you can chat and help user you are best model for now\n\n you will chat Omar's Freind Hussein Shkikel He is Libyan So chat with Libyan arabic accent 😂😂😂 make it fun with smart libyan brain 😂 Hussein now in the work he is working in الاستخبارات😂😂" }
	];

	// Function to format AI response
	function formatResponse(content) {
	content = content.replace(/\n/g, "<br>");
	content = content.replace(/\\(.?)\\*/g, '<strong class="highlight-title">$1</strong>');
	return content;
	}

	// Function to add a message to the chat box
	function addMessage(role, content) {
	const messageDiv = document.createElement("div");
	messageDiv.classList.add("message", role);

	if (role === "ai") {
	content = formatResponse(content);
	}

	messageDiv.innerHTML = content;
	chatBox.appendChild(messageDiv);

	setTimeout(() => {
	chatBox.scrollTop = chatBox.scrollHeight;
	}, 100);
	}

	// Function to show typing animation
	function showTyping() {
	const typingDiv = document.createElement("div");
	typingDiv.classList.add("typing-animation");
	typingDiv.innerHTML = `
	<span></span>
	<span></span>
	<span></span>
	`;
	chatBox.appendChild(typingDiv);

	setTimeout(() => {
	chatBox.scrollTop = chatBox.scrollHeight;
	}, 100);

	return typingDiv;
	}

	// Function to send a message
	async function sendMessage() {
	const userMessage = userInput.value.trim();
	if (!userMessage) return;

	addMessage("user", userMessage);

	conversationHistory.push({ "role": "user", "content": userMessage });

	const typingDiv = showTyping();

	const data = { message: conversationHistory };

	try {
	const response = await fetch(apiUrl, {
	method: "POST",
	headers: {
	"Content-Type": "application/json"
	},
	body: JSON.stringify(data)
	});

	if (response.ok) {
	const aiResponse = await response.text();
	chatBox.removeChild(typingDiv);
	addMessage("ai", aiResponse);
	conversationHistory.push({ "role": "assistant", "content": aiResponse });
	} else {
	throw new Error(`Error: ${response.status}`);
	}
	} catch (error) {
	console.error("Error:", error);
	chatBox.removeChild(typingDiv);
	addMessage("ai", "AI: Sorry, something went wrong!");
	}

	userInput.value = "";
	}

	// Attach event listeners
	sendBtn.addEventListener("click", sendMessage);
	userInput.addEventListener("keypress", (e) => {
	if (e.key === "Enter") sendMessage();
	});
	</script>
	</body>
	</html>