Upload 13 files

Dockerfile

@@ -0,0 +1,15 @@
+# read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+# CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]
+CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:7860", "main:app"]

api.py

@@ -0,0 +1,125 @@
+import requests
+from PIL import Image
+import io
+import base64
+
+# FILTER
+
+import re
+def clean_string(input_string):
+    # Lowercase the string and remove non-alphabetic characters
+    cleaned_string = re.sub(r'[^a-z]', '', input_string.lower())
+    return cleaned_string
+with open("invalid_searches.txt", 'r') as f:
+	invalid = f.readlines()
+	invalid = [clean_string(i) for i in invalid]
+	invalid = [i for i in invalid if i != ""]
+	invalid.append("")
+def check_invalid(word):
+	word = clean_string(word)
+	return word in invalid
+
+# GETTING THE KEYS
+
+# from keys import *
+import os
+HF_TOKEN = os.environ.get('HF_TOKEN')
+DICTIONARY_API_KEY = os.environ.get('DICTIONARY_API_KEY')
+
+def get_definition(word):
+
+	url = 'https://siwar.ksaa.gov.sa/api/alriyadh/exact-search'
+	headers = {
+		'accept': 'application/json',
+		'apikey': DICTIONARY_API_KEY
+	}
+	params = {'query': word}
+	response = requests.get(url, params=params, headers=headers)
+	print(response)
+
+	# word not found
+	define = response.json()
+	if len(define) == 0:
+		return "", "",  []
+
+	define = define[0]
+
+	word = define['lemma']['formRepresentations'][0]['form']
+	english = None
+	meanings_examples = []
+
+	for i, sense in enumerate(define['senses']):
+		meaning = sense['definition']['textRepresentations'][0]['form']
+		example = None
+		for ex in sense['examples']:
+			if ex['form'] != "":
+				example = ex['form']
+		for ex in sense['translations']:
+			if ex['form'] != "" and not english:
+				english = ex['form']
+
+		meanings_examples.append({
+			"i": i+1,
+			"meaning": meaning,
+			"example": example
+		})
+
+	return word, english, meanings_examples
+
+def get_translation(word):
+
+	if word == "":
+		return ""
+
+	API_URL = "https://api-inference.huggingface.co/models/Helsinki-NLP/opus-mt-ar-en"
+	headers = {"Authorization": f"Bearer {HF_TOKEN}"}
+
+	response = requests.post(API_URL, headers=headers, json={
+		"inputs": word,
+	})
+	print(response)
+	response = response.json()
+	print(response)
+
+	# error in response
+	if type(response) == dict:
+		return ""
+
+	return response[0]['translation_text']
+
+def get_image(word):
+
+	print(word)
+
+	if check_invalid(word):
+		return None
+		# blank image
+		return "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
+
+	API_URL = "https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5"
+	headers = {"Authorization": f"Bearer {HF_TOKEN}"}
+
+	response = requests.post(API_URL, headers=headers, json={
+		"inputs": word,
+	})
+	print(response)
+	image_bytes = response.content
+
+	image = Image.open(io.BytesIO(image_bytes))
+
+	# Convert image to base64
+	image_base64 = ""
+	with io.BytesIO() as buffer:
+		image.save(buffer, format="JPEG")  # You can change the format if your image is in a different format
+		image_base64 = base64.b64encode(buffer.getvalue()).decode('utf-8')
+	
+	return image_base64
+
+
+if __name__ == "__main__":
+	pass
+	# word, meanings_examples = get_definition('fsdf')
+	# print(word, meanings_examples)
+
+
+

gitignore

@@ -0,0 +1,4 @@
+extras/
+test_response/
+__pycache__
+keys.py

invalid_searches.txt

@@ -0,0 +1,7 @@
+Allah
+God
+Muhammad
+Prophet
+Surah Muhammed
+
+

main.py

@@ -0,0 +1,49 @@
+from flask import Flask, request, render_template
+
+from api import (
+	get_definition,
+	get_translation,
+	get_image,
+)
+# from test_api import (
+	# get_definition,
+	# get_translation,
+	# get_image,
+# )
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+	word = request.args.get('word', None)
+
+	# HOME PAGE NO WORD YET
+	if word == None:
+		return render_template("index.html", data=None)
+
+	# 1. GET DEFINITION
+	print("-------> get_definition")
+	word, english, meanings_examples = get_definition(word)
+
+	# 2. GET TRANSLATION
+	print("-------> get_translation")
+	if not english:
+		english = get_translation(word)
+
+	# 3. GET IMAGE
+	print("-------> get_image")
+	img = get_image(english)
+
+	print("-------> return_data")
+	# 4. RETURN DATA
+	data = {
+		"word": word,	# 1, 2
+		"english": english,	# 5
+		"img": img,	# 6
+		"meanings_examples": meanings_examples,	# 3, 4
+	}
+	return render_template("index.html", data=data)
+
+if __name__ == '__main__':
+	app.run(debug=True)
+	# app.run()

requirements.txt

@@ -0,0 +1,5 @@
+uvicorn
+Pillow
+Flask
+requests
+gunicorn

templates/templates_index.html

@@ -0,0 +1,538 @@
+<html lang="ar" dir="rtl">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>قاموس</title>
+	<meta name="keywords"
+		content="المعجم الرياض, المعجم العربي, معجم معاني الكلمات, معاني الكلمات, معاني,مرادفات,متضادات,معاجم تراثية,معنى كلمة,تشكيل كلمات,تشكيل,المشكل,القاموس,قاموس,قاموس عربي,سمات لغوية,المدقق,المدقق الإملائي,">
+	<link rel="preload" href="{{ url_for('static', filename='e8c205fd85388127.css') }}" as="style">
+	<link rel="stylesheet" href="{{ url_for('static', filename='e8c205fd85388127.css') }}" data-n-g="">
+
+	<style data-jss="" data-meta="MuiInput">
+		.MuiInput-root {
+			position: relative;
+		}
+
+		label+.MuiInput-formControl {
+			margin-top: 16px;
+		}
+
+		.MuiInput-colorSecondary.MuiInput-underline:after {
+			border-bottom-color: #f50057;
+		}
+
+		.MuiInput-underline:after {
+			left: 0;
+			right: 0;
+			bottom: 0;
+			content: "";
+			position: absolute;
+			transform: scaleX(0);
+			transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+			border-bottom: 2px solid #3f51b5;
+			pointer-events: none;
+		}
+
+		.MuiInput-underline.Mui-focused:after {
+			transform: scaleX(1);
+		}
+
+		.MuiInput-underline.Mui-error:after {
+			transform: scaleX(1);
+			border-bottom-color: #f44336;
+		}
+
+		.MuiInput-underline:before {
+			left: 0;
+			right: 0;
+			bottom: 0;
+			content: "\00a0";
+			position: absolute;
+			transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+			border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+			pointer-events: none;
+		}
+
+		.MuiInput-underline:hover:not(.Mui-disabled):before {
+			border-bottom: 2px solid rgba(0, 0, 0, 0.87);
+		}
+
+		.MuiInput-underline.Mui-disabled:before {
+			border-bottom-style: dotted;
+		}
+
+		@media (hover: none) {
+			.MuiInput-underline:hover:not(.Mui-disabled):before {
+				border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+			}
+		}
+	</style>
+	<style data-jss="" data-meta="MuiFormLabel">
+		.MuiFormLabel-root {
+			color: rgba(0, 0, 0, 0.54);
+			padding: 0;
+			font-size: 1rem;
+			font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+			font-weight: 400;
+			line-height: 1;
+			letter-spacing: 0.00938em;
+		}
+
+		.MuiFormLabel-root.Mui-focused {
+			color: #3f51b5;
+		}
+
+		.MuiFormLabel-root.Mui-disabled {
+			color: rgba(0, 0, 0, 0.38);
+		}
+
+		.MuiFormLabel-root.Mui-error {
+			color: #f44336;
+		}
+
+		.MuiFormLabel-colorSecondary.Mui-focused {
+			color: #f50057;
+		}
+
+		.MuiFormLabel-asterisk.Mui-error {
+			color: #f44336;
+		}
+	</style>
+	<style data-jss="" data-meta="MuiInputLabel">
+		.MuiInputLabel-root {
+			display: block;
+			transform-origin: top left;
+		}
+
+		.MuiInputLabel-formControl {
+			top: 0;
+			left: 0;
+			position: absolute;
+			transform: translate(0, 24px) scale(1);
+		}
+
+		.MuiInputLabel-marginDense {
+			transform: translate(0, 21px) scale(1);
+		}
+
+		.MuiInputLabel-shrink {
+			transform: translate(0, 1.5px) scale(0.75);
+			transform-origin: top left;
+		}
+
+		.MuiInputLabel-animated {
+			transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+		}
+
+		.MuiInputLabel-filled {
+			z-index: 1;
+			transform: translate(12px, 20px) scale(1);
+			pointer-events: none;
+		}
+
+		.MuiInputLabel-filled.MuiInputLabel-marginDense {
+			transform: translate(12px, 17px) scale(1);
+		}
+
+		.MuiInputLabel-filled.MuiInputLabel-shrink {
+			transform: translate(12px, 10px) scale(0.75);
+		}
+
+		.MuiInputLabel-filled.MuiInputLabel-shrink.MuiInputLabel-marginDense {
+			transform: translate(12px, 7px) scale(0.75);
+		}
+
+		.MuiInputLabel-outlined {
+			z-index: 1;
+			transform: translate(14px, 20px) scale(1);
+			pointer-events: none;
+		}
+
+		.MuiInputLabel-outlined.MuiInputLabel-marginDense {
+			transform: translate(14px, 12px) scale(1);
+		}
+
+		.MuiInputLabel-outlined.MuiInputLabel-shrink {
+			transform: translate(14px, -6px) scale(0.75);
+		}
+	</style>
+	<style data-jss="" data-meta="MuiFormControl">
+		.MuiFormControl-root {
+			border: 0;
+			margin: 0;
+			display: inline-flex;
+			padding: 0;
+			position: relative;
+			min-width: 0;
+			flex-direction: column;
+			vertical-align: top;
+		}
+
+		.MuiFormControl-marginNormal {
+			margin-top: 16px;
+			margin-bottom: 8px;
+		}
+
+		.MuiFormControl-marginDense {
+			margin-top: 8px;
+			margin-bottom: 4px;
+		}
+
+		.MuiFormControl-fullWidth {
+			width: 100%;
+		}
+	</style>
+	<style data-jss="" data-meta="MuiPaper">
+		.MuiPaper-root {
+			color: rgba(0, 0, 0, 0.87);
+			transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+			background-color: #fff;
+		}
+
+		.MuiPaper-rounded {
+			border-radius: 4px;
+		}
+
+		.MuiPaper-outlined {
+			border: 1px solid rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation0 {
+			box-shadow: none;
+		}
+
+		.MuiPaper-elevation1 {
+			box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation2 {
+			box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation3 {
+			box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation4 {
+			box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation5 {
+			box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation6 {
+			box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation7 {
+			box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation8 {
+			box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation9 {
+			box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation10 {
+			box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation11 {
+			box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation12 {
+			box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation13 {
+			box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation14 {
+			box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation15 {
+			box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation16 {
+			box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation17 {
+			box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation18 {
+			box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation19 {
+			box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation20 {
+			box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation21 {
+			box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation22 {
+			box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation23 {
+			box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
+		}
+
+		.MuiPaper-elevation24 {
+			box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+		}
+	</style>
+	<style data-jss="" data-meta="MuiSvgIcon">
+		.MuiSvgIcon-root {
+			fill: currentColor;
+			width: 1em;
+			height: 1em;
+			display: inline-block;
+			font-size: 1.5rem;
+			transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+			flex-shrink: 0;
+			user-select: none;
+		}
+
+		.MuiSvgIcon-colorPrimary {
+			color: #3f51b5;
+		}
+
+		.MuiSvgIcon-colorSecondary {
+			color: #f50057;
+		}
+
+		.MuiSvgIcon-colorAction {
+			color: rgba(0, 0, 0, 0.54);
+		}
+
+		.MuiSvgIcon-colorError {
+			color: #f44336;
+		}
+
+		.MuiSvgIcon-colorDisabled {
+			color: rgba(0, 0, 0, 0.26);
+		}
+
+		.MuiSvgIcon-fontSizeInherit {
+			font-size: inherit;
+		}
+
+		.MuiSvgIcon-fontSizeSmall {
+			font-size: 1.25rem;
+		}
+
+		.MuiSvgIcon-fontSizeLarge {
+			font-size: 2.1875rem;
+		}
+	</style>
+
+</head>
+
+<body>
+	<div id="__next" data-reactroot="">
+		<div id="content">
+
+
+			<header class="header-inside">
+				<div class="container">
+					<nav class="navbar navbar-expand-lg home-nav">
+						<nav class="navbar navbar-light m-0 mr-4">
+							<img src="{{ url_for('static', filename='imgs/logo-dark.svg') }}"
+								alt="KSAA Logo شعار مجمع الملك سلمان العالمي للغة العربية" height="45">
+						</nav><button class="navbar-toggler" type="button" data-toggle="collapse"
+							data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
+							aria-label="Toggle navigation">
+							<img src="{{ url_for('static', filename='imgs/menu-black.svg') }}" width="25px;" alt="menu">
+						</button>
+						<div class="collapse navbar-collapse responsive-light" id="navbarNav">
+							<ul class="navbar-nav Traditional_nav__zD2_d bg-white border-1">
+								<li class="nav-item active"><a class="nav-link  Traditional_navItem25__VUKZC"
+										href="">الرئيسة</a></li>
+								<li class="nav-item"><a class="nav-link  Traditional_navItem25__VUKZC" href="">كلمة
+										اليوم</a></li>
+								<li class="nav-item"><a class="nav-link  Traditional_navItem25__VUKZC handCutsor"
+										href="">إثراء المعجم</a></li>
+								<li class="nav-item"><a class="nav-link  Traditional_navItem25__VUKZC" href="">عن
+										المعجم</a></li>
+								<li class="nav-item"><a class="nav-link  Traditional_navItem25__VUKZC"
+										href="">إحصاءات</a></li>
+								<li class="nav-item"><a class="nav-link  Traditional_navItem25__VUKZC handCutsor"
+										href="">اتصل بنا</a></li>
+							</ul>
+						</div>
+						<a href="" class="ml-5 hide-md hide-xs">
+							<img src="{{ url_for('static', filename='imgs/logoA.png') }}" height="45"
+								alt="شعار مجمع الملك سلمان العالي للغة العربية ">
+						</a>
+					</nav>
+				</div>
+			</header>
+
+			<main class="pages-bg">
+
+				<header class="header-inside">
+					<main class="sub-menu ">
+						<div class="container mx-auto ">
+							<form action="/" method="" class="pb-1 pt-5">
+								<div
+									class="row no-gutters justify-content-between custom-search bg-white rounded-5 border-1">
+									<div class="col-xs-12 col-sm-8 col-lg-8 row no-wrap justify-content-between pl-3 ">
+										<img alt="search icon" src="/assets/img/searchIcon.png" class="search-icon">
+										<div class="form-group ">
+											<div class="MuiAutocomplete-root" role="combobox" aria-expanded="false"
+												style="width: 300px;">
+												<div
+													class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
+													<label
+														class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+														data-shrink="false" for="autocomplete-box"
+														id="autocomplete-box-label">كلمة البحث</label>
+													<div
+														class="MuiInputBase-root MuiInput-root MuiInput-underline MuiAutocomplete-inputRoot MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd">
+														<input aria-invalid="false" autocomplete="off"
+															id="autocomplete-box" name="word" placeholder="كلمة البحث"
+															type="text"
+															class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd"
+															aria-autocomplete="list" autocapitalize="none"
+															spellcheck="false" value="">
+														<div class="MuiAutocomplete-endAdornment"></div>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+									<div class=" col-xs-12 col-sm-4 col-lg-4 p-0"><input type="submit"
+											class="m-0 rounded-5 " value="ابحث"></div>
+								</div>
+								<div class="search-letters mt-5">
+									<ul>
+										<li id="A1">ء</li>
+										<li id="A2">ب</li>
+										<li id="A3">ت</li>
+										<li id="A4">ث</li>
+										<li id="A5">ج</li>
+										<li id="A6">ح</li>
+										<li id="A7">خ</li>
+										<li id="A8">د</li>
+										<li id="A9">ذ</li>
+										<li id="A10">ر</li>
+										<li id="A11">ز</li>
+										<li id="A12">س</li>
+										<li id="A13">ش</li>
+										<li id="A14">ص</li>
+										<li id="A15">ض</li>
+										<li id="A16">ط</li>
+										<li id="A17">ظ</li>
+										<li id="A18">ع</li>
+										<li id="A19">غ</li>
+										<li id="A20">ف</li>
+										<li id="A21">ق</li>
+										<li id="A22">ك</li>
+										<li id="A23">ل</li>
+										<li id="A24">م</li>
+										<li id="A25">ن</li>
+										<li id="A26">هـ</li>
+										<li id="A27">و</li>
+										<li id="A28">ي</li>
+										<li id="A29">رموز</li>
+									</ul>
+								</div>
+							</form>
+						</div>
+					</main>
+				</header>
+
+				{% if data is not none %}
+				<section class="words-detail">
+					<div class="container">
+						<div>
+							<div class="mb-5">
+								<div id="d17053" class="list-card-list p-0 my-2 clearfix separate">
+									<div id="17053" class="row items-center wordBg justify-content-between">
+										<div class="col-xs-8 col-lg-8 pl-4 pr-0">
+											<h2 class="clr-blue h1 py-3">{{ data.word }} </h2>
+											<h4 class="">
+												{{ data.english }}
+											</h4>
+										</div>
+										{% if data.img is not none %}
+										<div>
+											<img style="padding: 10px; border-radius: 20px;" width="200px"
+												src="data:image/jpeg;base64,{{ data.img }}">
+											<br>
+											<p style="text-align: center;">تم توليد الصوره باستخدام AI</p>
+										</div>
+										{% endif %}
+									</div>
+									<div class="px-2 show collapse" id="c17053">
+										<div class="examples-container">
+
+											{% for meaning_example in data.meanings_examples %}
+
+											<div class="examples">
+												<ul class="text-left arabic">
+													<li>
+														<div class="row justify-content-between examplesBg">
+															<div class="clr-blue"><span>{{ meaning_example.i }} .
+																</span>
+																<p class="d-inline font-bol">{{ meaning_example.meaning
+																	}}</p>
+															</div>
+														</div>
+
+														{% if meaning_example.example is not none %}
+
+														<div class="buttons-more mt-3 ">
+															<div class="row mx-0"><button
+																	class="btn mr-3 my-2 rounded-3 bg-blue font-bold text-white">أمثلة</button>
+															</div>
+														</div>
+														<div class="row justify-content-between">
+															<div class="clr-blue">
+																<p class="d-inline font-bol">{{ meaning_example.example
+																	}}</p>
+															</div>
+														</div>
+
+														{% endif %}
+
+													</li>
+												</ul>
+											</div>
+
+											{% endfor %}
+
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+					</div>
+				</section>
+				{% endif %}
+
+			</main>
+		</div>
+	</div>
+
+</body>
+
+</html>