Hugging Face's logo

Spaces:
Nuzwa
/
_AI_image_prompt_Generator_
Running

App Files Community
Nuzwa commited on
Commit
6ea3221
·
verified ·
1 Parent(s): a49c4c5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +89 -131
index.html CHANGED
@@ -1,160 +1,118 @@
1
- <!-- Reusable Prompt Generator Widget (multi-instance safe) -->
2
- <div class="pg-widget" dir="rtl" data-gpt-href="https://chat.openai.com/g/gpt-XXXX-one" data-title="Prompt Generator A">
3
- <div class="pg-card">
4
- <h2 class="pg-title"></h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
 
6
- <div class="pg-tabs">
7
- <button class="pg-tab is-active" data-target="gen">Generator</button>
8
- <button class="pg-tab" data-target="gpt">Custom GPT</button>
9
- </div>
10
-
11
- <div class="pg-panel is-active" data-panel="gen">
12
  <div class="pg-field">
13
- <label>موضوع / ٹاپک</label>
14
- <input type="text" placeholder="مثلاً: سوشل میڈیا پوسٹ">
15
  </div>
16
  <div class="pg-field">
17
- <label>ٹون</label>
18
  <select>
19
- <option>دوستانہ</option>
20
- <option>پروفیشنل</option>
21
- <option>دلائل سے قائل کرنے والا</option>
22
- <option>اطلاعی</option>
23
  </select>
24
  </div>
25
  <div class="pg-field">
26
- <label>آڈینس</label>
27
  <select>
28
- <option>عام لوگ</option>
29
- <option>طلبہ</option>
30
- <option>کسٹمرز</option>
31
- <option>منیجمنٹ</option>
32
  </select>
33
  </div>
34
- <button class="pg-generate">Generate Prompt</button>
35
- <div class="pg-result" aria-live="polite"></div>
36
- </div>
37
 
38
- <div class="pg-panel" data-panel="gpt">
39
- <p>اپنا Custom GPT نیچے لنک سے کھولیں:</p>
40
- <a class="pg-link" target="_blank" rel="noopener">Open Custom GPT</a>
 
 
 
 
41
  </div>
42
  </div>
43
- </div>
44
 
45
- <!-- --- مزید کاپی (بس لنک/عنوان بدلیے) --- -->
46
- <div class="pg-widget" dir="rtl" data-gpt-href="https://chat.openai.com/g/gpt-YYYY-two" data-title="Prompt Generator B"></div>
47
- <div class="pg-widget" dir="rtl" data-gpt-href="https://chat.openai.com/g/gpt-ZZZZ-three" data-title="Prompt Generator C"></div>
 
48
 
49
- <style>
50
- /* Scoped styles */
51
- .pg-widget{font-family:sans-serif,Arial,Helvetica;display:block;margin:20px auto;max-width:520px}
52
- .pg-widget .pg-card{background:#f9f9f9;border-radius:14px;border-top:5px solid #8A2BE2;padding:20px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
53
- .pg-widget .pg-title{margin:0 0 14px;color:#8A2BE2;text-align:center}
54
- .pg-widget .pg-tabs{display:flex;gap:6px;border-bottom:2px solid #D1C4E9;margin-bottom:12px}
55
- .pg-widget .pg-tab{flex:1;background:none;border:none;padding:10px;font-weight:700;color:#6A1B9A;border-bottom:3px solid transparent;cursor:pointer}
56
- .pg-widget .pg-tab.is-active{color:#8A2BE2;border-bottom-color:#8A2BE2}
57
- .pg-widget .pg-panel{display:none}
58
- .pg-widget .pg-panel.is-active{display:block}
59
- .pg-widget .pg-field{margin:12px 0}
60
- .pg-widget label{display:block;margin-bottom:6px;color:#6A1B9A;font-weight:700}
61
- .pg-widget input,.pg-widget select{width:100%;padding:12px;border:1px solid #D1C4E9;border-radius:8px;background:#fff}
62
- .pg-widget input:focus,.pg-widget select:focus{outline:none;border-color:#8A2BE2;box-shadow:0 0 5px rgba(138,43,226,.3)}
63
- .pg-widget .pg-generate{width:100%;margin-top:10px;padding:14px;font-weight:700;color:#6A1B9A;background:#F3E5F5;border:2px solid #D1C4E9;border-radius:8px;cursor:pointer}
64
- .pg-widget .pg-generate:hover{background:#8A2BE2;color:#fff;border-color:#8A2BE2}
65
- .pg-widget .pg-result{margin-top:14px;min-height:120px;padding:14px;background:#F3E5F5;border:1px solid #D1C4E9;border-radius:8px;color:#6A1B9A;white-space:pre-wrap}
66
- .pg-widget .pg-link{display:inline-block;margin-top:8px;padding:12px 14px;border-radius:8px;background:#111827;color:#fff;text-decoration:none}
67
- .pg-widget .pg-link:hover{background:#0b1220}
68
- </style>
69
-
70
- <script>
71
- /* Per-page single initializer (multi-instance safe) */
72
- (() => {
73
- // Avoid double init if snippet is added twice
74
- if (window.__pgMultiInit) return;
75
- window.__pgMultiInit = true;
76
-
77
- const initWidget = (root) => {
78
- if (!root || root.dataset.inited) return;
79
- root.dataset.inited = "1";
80
-
81
- // Build inner HTML only if empty (allows short form copies)
82
- if (!root.querySelector('.pg-card')) {
83
- root.innerHTML = `
84
- <div class="pg-card">
85
- <h2 class="pg-title"></h2>
86
- <div class="pg-tabs">
87
- <button class="pg-tab is-active" data-target="gen">Generator</button>
88
- <button class="pg-tab" data-target="gpt">Custom GPT</button>
89
- </div>
90
- <div class="pg-panel is-active" data-panel="gen">
91
- <div class="pg-field"><label>موضوع / ٹاپک</label><input type="text" placeholder="مثلاً: سوشل میڈیا پوسٹ"></div>
92
- <div class="pg-field"><label>ٹون</label><select><option>دوستانہ</option><option>پروفیشنل</option><option>دلائل سے قائل کرنے والا</option><option>اطلاعی</option></select></div>
93
- <div class="pg-field"><label>آڈینس</label><select><option>عام لوگ</option><option>طلبہ</option><option>کسٹمرز</option><option>منیجمنٹ</option></select></div>
94
- <button class="pg-generate">Generate Prompt</button>
95
- <div class="pg-result" aria-live="polite"></div>
96
- </div>
97
- <div class="pg-panel" data-panel="gpt">
98
- <p>اپنا Custom GPT نیچے لنک سے کھولیں:</p>
99
- <a class="pg-link" target="_blank" rel="noopener">Open Custom GPT</a>
100
- </div>
101
- </div>`;
102
- }
103
-
104
- // Title & link from data-attributes
105
- const title = root.querySelector('.pg-title');
106
- const link = root.querySelector('.pg-link');
107
- title.textContent = root.dataset.title || 'Prompt Generator';
108
- if (link && root.dataset.gptHref) link.href = root.dataset.gptHref;
109
-
110
- // Tabs
111
- const tabs = root.querySelectorAll('.pg-tab');
112
- const panels = root.querySelectorAll('.pg-panel');
113
- tabs.forEach(btn => {
114
- btn.addEventListener('click', () => {
115
- tabs.forEach(b => b.classList.remove('is-active'));
116
- panels.forEach(p => p.classList.remove('is-active'));
117
- btn.classList.add('is-active');
118
- const target = btn.getAttribute('data-target');
119
- root.querySelector(`.pg-panel[data-panel="${target}"]`)?.classList.add('is-active');
120
- });
121
- });
122
-
123
- // Generate (simple demo)
124
- const genBtn = root.querySelector('.pg-generate');
125
- const result = root.querySelector('.pg-result');
126
  const topic = root.querySelector('input');
127
  const tone = root.querySelectorAll('select')[0];
128
  const audience = root.querySelectorAll('select')[1];
 
 
 
 
129
 
130
- genBtn?.addEventListener('click', () => {
131
- const t = (topic?.value || 'میرا موضوع').trim();
132
- const tn = tone?.selectedOptions?.[0]?.text || 'دوستانہ';
133
- const aud = audience?.selectedOptions?.[0]?.text || 'عام لوگ';
134
- result.textContent = [
135
  '### Prompt',
136
  `Topic: ${t}`,
137
  `Tone: ${tn}`,
138
  `Audience: ${aud}`,
139
  '',
140
  'Instruction:',
141
- `Write a clear, structured response on "${t}" in a ${tn} tone, tailored for ${aud}.`
142
  ].join('\n');
143
- });
144
- };
145
-
146
- // Initialize all existing
147
- document.querySelectorAll('.pg-widget').forEach(initWidget);
148
 
149
- // If builder adds later (AJAX), observe DOM
150
- const obs = new MutationObserver((muts) => {
151
- muts.forEach(m => m.addedNodes.forEach(n => {
152
- if (n.nodeType === 1) {
153
- if (n.matches?.('.pg-widget')) initWidget(n);
154
- n.querySelectorAll?.('.pg-widget')?.forEach(initWidget);
 
 
 
 
 
155
  }
156
- }));
157
- });
158
- obs.observe(document.documentElement, { childList: true, subtree: true });
159
- })();
160
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Image Prompt Generator — Single Interface</title>
7
+ <style>
8
+ .pg-widget{font-family:sans-serif,Arial,Helvetica;display:block;margin:20px auto;max-width:560px}
9
+ .pg-card{background:#f9f9f9;border-radius:14px;border-top:5px solid #8A2BE2;padding:20px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
10
+ .pg-title{margin:0 0 14px;color:#8A2BE2;text-align:center;font-size:1.6rem;font-weight:800}
11
+ .pg-field{margin:12px 0}
12
+ .pg-field label{display:block;margin-bottom:6px;color:#6A1B9A;font-weight:700}
13
+ .pg-field input,.pg-field select{width:100%;padding:12px;border:1px solid #D1C4E9;border-radius:8px;background:#fff}
14
+ .pg-field input:focus,.pg-field select:focus{outline:none;border-color:#8A2BE2;box-shadow:0 0 5px rgba(138,43,226,.3)}
15
+ .pg-actions{display:flex;gap:10px;flex-wrap:wrap}
16
+ .pg-btn{flex:1 1 180px;padding:14px;border-radius:8px;border:2px solid #D1C4E9;background:#F3E5F5;color:#6A1B9A;font-weight:700;cursor:pointer}
17
+ .pg-btn:hover{background:#8A2BE2;color:#fff;border-color:#8A2BE2}
18
+ .pg-result{margin-top:14px;min-height:140px;padding:14px;background:#F3E5F5;border:1px solid #D1C4E9;border-radius:8px;color:#6A1B9A;white-space:pre-wrap;word-break:break-word}
19
+ .pg-status{margin-top:8px;font-size:.95rem;color:#2563eb;min-height:1.25em}
20
+ </style>
21
+ </head>
22
+ <body>
23
+ <div class="pg-widget" data-gpt-href="https://chat.openai.com/g/gpt-XXXX-your-custom-gpt">
24
+ <div class="pg-card">
25
+ <h2 class="pg-title">Image Prompt Generator</h2>
26
 
27
+ <!-- Options (kept as requested) -->
 
 
 
 
 
28
  <div class="pg-field">
29
+ <label>Topic</label>
30
+ <input type="text" placeholder="e.g. Product photo of a smartwatch" />
31
  </div>
32
  <div class="pg-field">
33
+ <label>Tone</label>
34
  <select>
35
+ <option>Friendly</option>
36
+ <option>Professional</option>
37
+ <option>Persuasive</option>
38
+ <option>Informative</option>
39
  </select>
40
  </div>
41
  <div class="pg-field">
42
+ <label>Audience</label>
43
  <select>
44
+ <option>General</option>
45
+ <option>Students</option>
46
+ <option>Customers</option>
47
+ <option>Management</option>
48
  </select>
49
  </div>
 
 
 
50
 
51
+ <div class="pg-actions">
52
+ <button class="pg-btn pg-generate">Generate Prompt</button>
53
+ <button class="pg-btn pg-open">Copy & Paste Now</button>
54
+ </div>
55
+
56
+ <div class="pg-status" aria-live="polite"></div>
57
+ <div class="pg-result" aria-live="polite"></div>
58
  </div>
59
  </div>
 
60
 
61
+ <script>
62
+ (() => {
63
+ const root = document.querySelector('.pg-widget');
64
+ if (!root) return;
65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  const topic = root.querySelector('input');
67
  const tone = root.querySelectorAll('select')[0];
68
  const audience = root.querySelectorAll('select')[1];
69
+ const result = root.querySelector('.pg-result');
70
+ const status = root.querySelector('.pg-status');
71
+ const genBtn = root.querySelector('.pg-generate');
72
+ const openBtn = root.querySelector('.pg-open');
73
 
74
+ function buildPrompt(){
75
+ const t = (topic?.value || 'My Topic').trim();
76
+ const tn = tone?.selectedOptions?.[0]?.text || 'Friendly';
77
+ const aud = audience?.selectedOptions?.[0]?.text || 'General';
78
+ return [
79
  '### Prompt',
80
  `Topic: ${t}`,
81
  `Tone: ${tn}`,
82
  `Audience: ${aud}`,
83
  '',
84
  'Instruction:',
85
+ `Create a detailed, high-quality image prompt about "${t}" in a ${tn} tone for ${aud}. Use concise, vivid descriptors, camera/details if relevant, and avoid extra prose.`,
86
  ].join('\n');
87
+ }
 
 
 
 
88
 
89
+ async function copyText(txt){
90
+ try {
91
+ await navigator.clipboard.writeText(txt);
92
+ status.textContent = 'Prompt generated & copied to clipboard.';
93
+ } catch (e){
94
+ // Fallback
95
+ const ta = document.createElement('textarea');
96
+ ta.value = txt; document.body.appendChild(ta); ta.select();
97
+ try { document.execCommand('copy'); status.textContent = 'Prompt generated & copied.'; }
98
+ catch { status.textContent = 'Prompt ready. Copy manually.'; }
99
+ finally { document.body.removeChild(ta); }
100
  }
101
+ }
102
+
103
+ genBtn?.addEventListener('click', async () => {
104
+ const txt = buildPrompt();
105
+ result.textContent = txt;
106
+ await copyText(txt); // auto-copy on generate
107
+ });
108
+
109
+ openBtn?.addEventListener('click', async () => {
110
+ const txt = result.textContent?.trim() || buildPrompt();
111
+ await copyText(txt); // ensure copied just before opening
112
+ const href = root.dataset.gptHref || '#';
113
+ window.open(href, '_blank', 'noopener');
114
+ });
115
+ })();
116
+ </script>
117
+ </body>
118
+ </html>