Display an HTML page (or Form)

[fpcteam]

This is the workflow that I am trying to create:

1. Trigger a Midjourney image generation api HTTP request (either as a fresh workflow or triggered by a previous node - source is not important)
2. Present the generated image (the collage of four images that MJ normally creates) to the user
3. Allow the user to select one of them to upscale (choice = 1, 2, 3 or 4)
4. Call another api request to MJ for upscaling
5. get the image and then use it wherever I need to.

I initially thought of creating a form with the image and the options and the button. But there’s only a next form and end form options.

The NEXT FORM requires a previous form trigger and the END FORM doesn’t allow fields (none that I could see).

And so I thought I’ll generate an HTML page to show the options and then present it to the user. But…

1. How do I show the generated HTML page? I couldn’t find any node or action to show the generated HTML template.
2. And how would I get the selected option from the page after it is submitted.

I might be wrong in the way I think this should be designed and executed and so if there’s another way to do this, I would appreciate the help. Any help is welcome.

the following workflow is for steps 2 and onwards. the image generation trigger happens in another flow.

Share the output returned by the last node

Information on your n8n setup

• n8n version: 1.66
• Database (default: SQLite): Default
• n8n EXECUTIONS_PROCESS setting (default: own, main): no clue
• Running n8n via (Docker, npm, n8n cloud, desktop app): npm
• Operating system: debian raspberry pi

[giulioandreini]

Hi @fpcteam
this is a super fun use case!
I don’t have the full solution but to start I would build something like this:

This exposes a URL which returns the html generated in the HTML node.
If the image retuened by Midjourney is a URL you could add the image there with an tag as in the example.
Then you have 4 buttons: you could add a link to the buttons or a javascript callback that call another workflow that exposes the URL with another webhook, and pass the selected image as a parameter.

Just some raw ideas.

How are you using Midjourney via APIs?

[fpcteam]

Hey. this could work. Let me try it out and let you know.

As for the MJ API, I just saw some medium post on it this morning and tried it out. Here is the link - https://medium.com/@divan.brexov/how-to-get-midjourneys-api-df0730aeab2d

The free plan is only 50 requests (a month I think, can’t remember now)… but that’s enough for testing though.

Will let you know about your solution.

[fpcteam]

Update: I changed the response to this:

and I don’t get the error any more.

But now I am not sure how to display it in the other workflow. any tips here?

------------------------- OLD STUFF ---------------------

It didn’t work. For some reason I am getting this error:

Invalid JSON in 'Response Body' field
Check that the syntax of the JSON in the 'Response Body' parameter is valid

with this trace:

NodeOperationError: Invalid JSON in 'Response Body' field at Object.execute (/home/pi/.nodejs_global/lib/node_modules/n8n/node_modules/n8n-nodes-base/nodes/RespondToWebhook/RespondToWebhook.node.ts:348:14) at Workflow.runNode (/home/pi/.nodejs_global/lib/node_modules/n8n/node_modules/n8n-workflow/src/Workflow.ts:1382:31) at /home/pi/.nodejs_global/lib/node_modules/n8n/node_modules/n8n-core/src/WorkflowExecute.ts:1163:42 at /home/pi/.nodejs_global/lib/node_modules/n8n/node_modules/n8n-core/src/WorkflowExecute.ts:1883:11

The expression is fine and I can see the html:

but it still won’t execute. Unfortunately, I am new to n8n to do any kind of troubleshooting myself.

[giulioandreini]

@fpcteam
“Respond With” should be set as “Text”
The endpoint is responding with HTML. If you set “All Incoming Items” it expects some valid JSON and returns an error. While if you set it as Text it doesn’t apply that validation.

Let me know if this helps