Hugging Face's logo

Spaces:
salehalmansour
/
Text_to_image_ar
No application file

App Files Community
salehalmansour commited on
Commit
023048d
·
verified ·
1 Parent(s): 6e27110

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +31 -533
templates/index.html CHANGED
@@ -1,538 +1,36 @@
1
- <html lang="ar" dir="rtl">
2
-
3
  <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>تبيان</title>
7
- <meta name="keywords"
8
- content="المعجم الرياض, المعجم العربي, معجم معاني الكلمات, معاني الكلمات, معاني,مرادفات,متضادات,معاجم تراثية,معنى كلمة,تشكيل كلمات,تشكيل,المشكل,القاموس,قاموس,قاموس عربي,سمات لغوية,المدقق,المدقق الإملائي,">
9
- <link rel="preload" href="{{ url_for('static', filename='ksaa.css') }}" as="style">
10
- <link rel="stylesheet" href="{{ url_for('static', filename='ksaa.css') }}" data-n-g="">
11
-
12
- <style data-jss="" data-meta="MuiInput">
13
- .MuiInput-root {
14
- position: relative;
15
- }
16
-
17
- label+.MuiInput-formControl {
18
- margin-top: 16px;
19
- }
20
-
21
- .MuiInput-colorSecondary.MuiInput-underline:after {
22
- border-bottom-color: #f50057;
23
- }
24
-
25
- .MuiInput-underline:after {
26
- left: 0;
27
- right: 0;
28
- bottom: 0;
29
- content: "";
30
- position: absolute;
31
- transform: scaleX(0);
32
- transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
33
- border-bottom: 2px solid #3f51b5;
34
- pointer-events: none;
35
- }
36
-
37
- .MuiInput-underline.Mui-focused:after {
38
- transform: scaleX(1);
39
- }
40
-
41
- .MuiInput-underline.Mui-error:after {
42
- transform: scaleX(1);
43
- border-bottom-color: #f44336;
44
- }
45
-
46
- .MuiInput-underline:before {
47
- left: 0;
48
- right: 0;
49
- bottom: 0;
50
- content: "\00a0";
51
- position: absolute;
52
- transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
53
- border-bottom: 1px solid rgba(0, 0, 0, 0.42);
54
- pointer-events: none;
55
- }
56
-
57
- .MuiInput-underline:hover:not(.Mui-disabled):before {
58
- border-bottom: 2px solid rgba(0, 0, 0, 0.87);
59
- }
60
-
61
- .MuiInput-underline.Mui-disabled:before {
62
- border-bottom-style: dotted;
63
- }
64
-
65
- @media (hover: none) {
66
- .MuiInput-underline:hover:not(.Mui-disabled):before {
67
- border-bottom: 1px solid rgba(0, 0, 0, 0.42);
68
- }
69
- }
70
- </style>
71
- <style data-jss="" data-meta="MuiFormLabel">
72
- .MuiFormLabel-root {
73
- color: rgba(0, 0, 0, 0.54);
74
- padding: 0;
75
- font-size: 1rem;
76
- font-family: "Roboto", "Helvetica", "Arial", sans-serif;
77
- font-weight: 400;
78
- line-height: 1;
79
- letter-spacing: 0.00938em;
80
- }
81
-
82
- .MuiFormLabel-root.Mui-focused {
83
- color: #3f51b5;
84
- }
85
-
86
- .MuiFormLabel-root.Mui-disabled {
87
- color: rgba(0, 0, 0, 0.38);
88
- }
89
-
90
- .MuiFormLabel-root.Mui-error {
91
- color: #f44336;
92
- }
93
-
94
- .MuiFormLabel-colorSecondary.Mui-focused {
95
- color: #f50057;
96
- }
97
-
98
- .MuiFormLabel-asterisk.Mui-error {
99
- color: #f44336;
100
- }
101
- </style>
102
- <style data-jss="" data-meta="MuiInputLabel">
103
- .MuiInputLabel-root {
104
- display: block;
105
- transform-origin: top left;
106
- }
107
-
108
- .MuiInputLabel-formControl {
109
- top: 0;
110
- left: 0;
111
- position: absolute;
112
- transform: translate(0, 24px) scale(1);
113
- }
114
-
115
- .MuiInputLabel-marginDense {
116
- transform: translate(0, 21px) scale(1);
117
- }
118
-
119
- .MuiInputLabel-shrink {
120
- transform: translate(0, 1.5px) scale(0.75);
121
- transform-origin: top left;
122
- }
123
-
124
- .MuiInputLabel-animated {
125
- transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
126
- }
127
-
128
- .MuiInputLabel-filled {
129
- z-index: 1;
130
- transform: translate(12px, 20px) scale(1);
131
- pointer-events: none;
132
- }
133
-
134
- .MuiInputLabel-filled.MuiInputLabel-marginDense {
135
- transform: translate(12px, 17px) scale(1);
136
- }
137
-
138
- .MuiInputLabel-filled.MuiInputLabel-shrink {
139
- transform: translate(12px, 10px) scale(0.75);
140
- }
141
-
142
- .MuiInputLabel-filled.MuiInputLabel-shrink.MuiInputLabel-marginDense {
143
- transform: translate(12px, 7px) scale(0.75);
144
- }
145
-
146
- .MuiInputLabel-outlined {
147
- z-index: 1;
148
- transform: translate(14px, 20px) scale(1);
149
- pointer-events: none;
150
- }
151
-
152
- .MuiInputLabel-outlined.MuiInputLabel-marginDense {
153
- transform: translate(14px, 12px) scale(1);
154
- }
155
-
156
- .MuiInputLabel-outlined.MuiInputLabel-shrink {
157
- transform: translate(14px, -6px) scale(0.75);
158
- }
159
- </style>
160
- <style data-jss="" data-meta="MuiFormControl">
161
- .MuiFormControl-root {
162
- border: 0;
163
- margin: 0;
164
- display: inline-flex;
165
- padding: 0;
166
- position: relative;
167
- min-width: 0;
168
- flex-direction: column;
169
- vertical-align: top;
170
- }
171
-
172
- .MuiFormControl-marginNormal {
173
- margin-top: 16px;
174
- margin-bottom: 8px;
175
- }
176
-
177
- .MuiFormControl-marginDense {
178
- margin-top: 8px;
179
- margin-bottom: 4px;
180
- }
181
-
182
- .MuiFormControl-fullWidth {
183
- width: 100%;
184
- }
185
- </style>
186
- <style data-jss="" data-meta="MuiPaper">
187
- .MuiPaper-root {
188
- color: rgba(0, 0, 0, 0.87);
189
- transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
190
- background-color: #fff;
191
- }
192
-
193
- .MuiPaper-rounded {
194
- border-radius: 4px;
195
- }
196
-
197
- .MuiPaper-outlined {
198
- border: 1px solid rgba(0, 0, 0, 0.12);
199
- }
200
-
201
- .MuiPaper-elevation0 {
202
- box-shadow: none;
203
- }
204
-
205
- .MuiPaper-elevation1 {
206
- 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);
207
- }
208
-
209
- .MuiPaper-elevation2 {
210
- 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);
211
- }
212
-
213
- .MuiPaper-elevation3 {
214
- 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);
215
- }
216
-
217
- .MuiPaper-elevation4 {
218
- 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);
219
- }
220
-
221
- .MuiPaper-elevation5 {
222
- 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);
223
- }
224
-
225
- .MuiPaper-elevation6 {
226
- 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);
227
- }
228
-
229
- .MuiPaper-elevation7 {
230
- 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);
231
- }
232
-
233
- .MuiPaper-elevation8 {
234
- 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);
235
- }
236
-
237
- .MuiPaper-elevation9 {
238
- 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);
239
- }
240
-
241
- .MuiPaper-elevation10 {
242
- 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);
243
- }
244
-
245
- .MuiPaper-elevation11 {
246
- 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);
247
- }
248
-
249
- .MuiPaper-elevation12 {
250
- 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);
251
- }
252
-
253
- .MuiPaper-elevation13 {
254
- 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);
255
- }
256
-
257
- .MuiPaper-elevation14 {
258
- 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);
259
- }
260
-
261
- .MuiPaper-elevation15 {
262
- 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);
263
- }
264
-
265
- .MuiPaper-elevation16 {
266
- 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);
267
- }
268
-
269
- .MuiPaper-elevation17 {
270
- 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);
271
- }
272
-
273
- .MuiPaper-elevation18 {
274
- 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);
275
- }
276
-
277
- .MuiPaper-elevation19 {
278
- 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);
279
- }
280
-
281
- .MuiPaper-elevation20 {
282
- 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);
283
- }
284
-
285
- .MuiPaper-elevation21 {
286
- 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);
287
- }
288
-
289
- .MuiPaper-elevation22 {
290
- 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);
291
- }
292
-
293
- .MuiPaper-elevation23 {
294
- 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);
295
- }
296
-
297
- .MuiPaper-elevation24 {
298
- 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);
299
- }
300
- </style>
301
- <style data-jss="" data-meta="MuiSvgIcon">
302
- .MuiSvgIcon-root {
303
- fill: currentColor;
304
- width: 1em;
305
- height: 1em;
306
- display: inline-block;
307
- font-size: 1.5rem;
308
- transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
309
- flex-shrink: 0;
310
- user-select: none;
311
- }
312
-
313
- .MuiSvgIcon-colorPrimary {
314
- color: #3f51b5;
315
- }
316
-
317
- .MuiSvgIcon-colorSecondary {
318
- color: #f50057;
319
- }
320
-
321
- .MuiSvgIcon-colorAction {
322
- color: rgba(0, 0, 0, 0.54);
323
- }
324
-
325
- .MuiSvgIcon-colorError {
326
- color: #f44336;
327
- }
328
-
329
- .MuiSvgIcon-colorDisabled {
330
- color: rgba(0, 0, 0, 0.26);
331
- }
332
-
333
- .MuiSvgIcon-fontSizeInherit {
334
- font-size: inherit;
335
- }
336
-
337
- .MuiSvgIcon-fontSizeSmall {
338
- font-size: 1.25rem;
339
- }
340
-
341
- .MuiSvgIcon-fontSizeLarge {
342
- font-size: 2.1875rem;
343
- }
344
- </style>
345
-
346
  </head>
347
-
348
  <body>
349
- <div id="__next" data-reactroot="">
350
- <div id="content">
351
-
352
-
353
- <header class="header-inside">
354
- <div class="container">
355
- <nav class="navbar navbar-expand-lg home-nav">
356
- <nav class="navbar navbar-light m-0 mr-4">
357
- <img src="{{ url_for('static', filename='imgs/logo-dark.svg') }}"
358
- alt="KSAA Logo شعار مجمع الملك سلمان العالمي للغة العربية" height="45">
359
- </nav><button class="navbar-toggler" type="button" data-toggle="collapse"
360
- data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
361
- aria-label="Toggle navigation">
362
- <img src="{{ url_for('static', filename='imgs/menu-black.svg') }}" width="25px;" alt="menu">
363
- </button>
364
- <div class="collapse navbar-collapse responsive-light" id="navbarNav">
365
- <ul class="navbar-nav Traditional_nav__zD2_d bg-white border-1">
366
- <li class="nav-item active"><a class="nav-link Traditional_navItem25__VUKZC"
367
- href="">الرئيسة</a></li>
368
- <li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC" href="">كلمة
369
- اليوم</a></li>
370
- <li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC handCutsor"
371
- href="">إثراء المعجم</a></li>
372
- <li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC" href="">عن
373
- المعجم</a></li>
374
- <li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC"
375
- href="">إحصاءات</a></li>
376
- <li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC handCutsor"
377
- href="">اتصل بنا</a></li>
378
- </ul>
379
- </div>
380
- <a href="" class="ml-5 hide-md hide-xs">
381
- <img src="{{ url_for('static', filename='imgs/logoA.png') }}" height="45"
382
- alt="شعار مجمع الملك سلمان العالي للغة العربية ">
383
- </a>
384
- </nav>
385
- </div>
386
- </header>
387
-
388
- <main class="pages-bg">
389
-
390
- <header class="header-inside">
391
- <main class="sub-menu ">
392
- <div class="container mx-auto ">
393
- <form action="/" method="" class="pb-1 pt-5">
394
- <div
395
- class="row no-gutters justify-content-between custom-search bg-white rounded-5 border-1">
396
- <div class="col-xs-12 col-sm-8 col-lg-8 row no-wrap justify-content-between pl-3 ">
397
- <img alt="search icon" src="/assets/img/searchIcon.png" class="search-icon">
398
- <div class="form-group ">
399
- <div class="MuiAutocomplete-root" role="combobox" aria-expanded="false"
400
- style="width: 300px;">
401
- <div
402
- class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
403
- <label
404
- class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
405
- data-shrink="false" for="autocomplete-box"
406
- id="autocomplete-box-label">كلمة البحث</label>
407
- <div
408
- class="MuiInputBase-root MuiInput-root MuiInput-underline MuiAutocomplete-inputRoot MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd">
409
- <input aria-invalid="false" autocomplete="off"
410
- id="autocomplete-box" name="word" placeholder="كلمة البحث"
411
- type="text"
412
- class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd"
413
- aria-autocomplete="list" autocapitalize="none"
414
- spellcheck="false" value="">
415
- <div class="MuiAutocomplete-endAdornment"></div>
416
- </div>
417
- </div>
418
- </div>
419
- </div>
420
- </div>
421
- <div class=" col-xs-12 col-sm-4 col-lg-4 p-0"><input type="submit"
422
- class="m-0 rounded-5 " value="ابحث"></div>
423
- </div>
424
- <div class="search-letters mt-5">
425
- <ul>
426
- <li id="A1">ء</li>
427
- <li id="A2">ب</li>
428
- <li id="A3">ت</li>
429
- <li id="A4">ث</li>
430
- <li id="A5">ج</li>
431
- <li id="A6">ح</li>
432
- <li id="A7">خ</li>
433
- <li id="A8">د</li>
434
- <li id="A9">ذ</li>
435
- <li id="A10">ر</li>
436
- <li id="A11">ز</li>
437
- <li id="A12">س</li>
438
- <li id="A13">ش</li>
439
- <li id="A14">ص</li>
440
- <li id="A15">ض</li>
441
- <li id="A16">ط</li>
442
- <li id="A17">ظ</li>
443
- <li id="A18">ع</li>
444
- <li id="A19">غ</li>
445
- <li id="A20">ف</li>
446
- <li id="A21">ق</li>
447
- <li id="A22">ك</li>
448
- <li id="A23">ل</li>
449
- <li id="A24">م</li>
450
- <li id="A25">ن</li>
451
- <li id="A26">هـ</li>
452
- <li id="A27">و</li>
453
- <li id="A28">ي</li>
454
- <li id="A29">رموز</li>
455
- </ul>
456
- </div>
457
- </form>
458
- </div>
459
- </main>
460
- </header>
461
-
462
- {% if data is not none %}
463
- <section class="words-detail">
464
- <div class="container">
465
- <div>
466
- <div class="mb-5">
467
- <div id="d17053" class="list-card-list p-0 my-2 clearfix separate">
468
- <div id="17053" class="row items-center wordBg justify-content-between">
469
- <div class="col-xs-8 col-lg-8 pl-4 pr-0">
470
- <h2 class="clr-blue h1 py-3">{{ data.word }} </h2>
471
- <h4 class="">
472
- {{ data.english }}
473
- </h4>
474
- </div>
475
- {% if data.img is not none %}
476
- <div>
477
- <img style="padding: 10px; border-radius: 20px;" width="200px"
478
- src="data:image/jpeg;base64,{{ data.img }}">
479
- <br>
480
- <p style="text-align: center; font-size:12px;"> كيف يرى الذكاء الإصطناعي هذه الكلمة</p>
481
- </div>
482
- {% endif %}
483
- </div>
484
- <div class="px-2 show collapse" id="c17053">
485
- <div class="examples-container">
486
-
487
- {% for meaning_example in data.meanings_examples %}
488
-
489
- <div class="examples">
490
- <ul class="text-left arabic">
491
- <li>
492
- <div class="row justify-content-between examplesBg">
493
- <div class="clr-blue"><span>{{ meaning_example.i }} .
494
- </span>
495
- <p class="d-inline font-bol">{{ meaning_example.meaning
496
- }}</p>
497
- </div>
498
- </div>
499
-
500
- {% if meaning_example.example is not none %}
501
-
502
- <div class="buttons-more mt-3 ">
503
- <div class="row mx-0"><button
504
- class="btn mr-3 my-2 rounded-3 bg-blue font-bold text-white">أمثلة</button>
505
- </div>
506
- </div>
507
- <div class="row justify-content-between">
508
- <div class="clr-blue">
509
- <p class="d-inline font-bol">{{ meaning_example.example
510
- }}</p>
511
- </div>
512
- </div>
513
-
514
- {% endif %}
515
-
516
- </li>
517
- </ul>
518
- </div>
519
-
520
- {% endfor %}
521
-
522
- </div>
523
- </div>
524
- </div>
525
- </div>
526
- </div>
527
-
528
- </div>
529
- </section>
530
- {% endif %}
531
-
532
- </main>
533
- </div>
534
- </div>
535
-
536
  </body>
537
-
538
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>App</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
 
9
  <body>
10
+ <h3>نموذج توليد الصور</h3>
11
+ <h3>اكتب وصف للصورة التي تود من النظام التوليدي انشاءها</h3>
12
+
13
+ <div>
14
+ <label for="prompt">Prompt:</label>
15
+ <input type="text" id="prompt" name="prompt">
16
+ <button onclick="generateImage()">Generate Image</button>
17
+ </div>
18
+
19
+ <div id="output"></div>
20
+
21
+ <script>
22
+ async function generateImage() {
23
+ const prompt = document.getElementById('prompt').value;
24
+
25
+ // Dummy implementation for demonstration
26
+ // Replace this with actual code if available in JavaScript
27
+ // Dummy image generation code
28
+ const dummyImage = document.createElement('img');
29
+ dummyImage.src = 'https://via.placeholder.com/400x400'; // Placeholder image URL
30
+
31
+ document.getElementById('output').innerHTML = ''; // Clear previous output
32
+ document.getElementById('output').appendChild(dummyImage);
33
+ }
34
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  </body>
 
36
  </html>