Hugging Face's logo

Spaces:
salehalmansour
/
Text-to-image-ar
Runtime error

App Files Community
salehalmansour commited on
Commit
7b8f4f9
•
1 Parent(s): 7ad00f2

Update templates/index.html

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