Update app.py

app.py

@@ -529,9 +529,35 @@ with gr.Blocks(theme="soft", title="Wordpress Article Generator") as article_gen
             link_azure = gr.Textbox(placeholder="Masukkan Endpoint Azure", label="Azure Endpoint", info = "Abaikan Kolom Ini Jika Anda Menggunakan Skema Openai")
             replicate_token = gr.Textbox(placeholder="Masukkan Token Replicate", label="Replicate Key")
             button_scrap = gr.Button("Scrap Article")
-            wysiwyg_editor_judul = gr.HTML("")
+            wysiwyg_editor_judul = gr.HTML("""
+                <label for="wysiwyg-editor">Article</label>
+                <textarea id="wysiwyg-editor" style="height: 100px; width: 50%;"></textarea>
+                <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
+                <script>
+                    tinymce.init({
+                        selector: '#wysiwyg-editor',
+                        plugins: 'lists advlist autolink link image charmap print preview hr anchor pagebreak',
+                        toolbar: 'undo redo | bold italic underline | fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+                        menubar: false,
+                        content_style: 'body { background-color: #143; color: #fff; }'
+                    });
+                </script>
+            """)
             img = gr.Image()
-            wysiwyg_editor = gr.HTML("")
+            wysiwyg_editor = gr.HTML("""
+                <label for="wysiwyg-editor">Article</label>
+                <textarea id="wysiwyg-editor" style="height: 300px; width: 50%;"></textarea>
+                <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
+                <script>
+                    tinymce.init({
+                        selector: '#wysiwyg-editor',
+                        plugins: 'lists advlist autolink link image charmap print preview hr anchor pagebreak',
+                        toolbar: 'undo redo | bold italic underline | fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+                        menubar: false,
+                        content_style: 'body { background-color: #143; color: #fff; }'
+                    });
+                </script>
+            """)
             button_scrap.click(fn=scrap, inputs=[link, backlink, keyword, versi, api_key, link_azure, replicate_token], outputs=[wysiwyg_editor_judul,img,wysiwyg_editor])
         with gr.Column():
             endpoint= gr.Textbox(placeholder="Masukkan Endpoint Wordpress", label="Endpoint Wordpress")