An AI-based AR Game System Backend Module Inquiry

[chow_kenny]

Hello everyone,

I am a Digital Art student with limited programming experience, and I am currently working on a project that involves developing a backend module for an AI-based AR game system using 8th Wall. The goal is for users to take photos using 8th Wall, upload them to OpenAI’s server, and have OpenAI recognize objects and their positions in the photos.

Here are some specific questions I’m encountering:

Module Setup: I am unsure how to properly set up the backend module to handle photo uploads and communicate with OpenAI’s API. Any guidance on the architecture or sample code would be greatly appreciated.

Bug Reports: I try to creating a backend gunctions, but it meets problme

Integration with OpenAI: If anyone has experience integrating 8th Wall with OpenAI, I would love to hear about your approach and any challenges you faced.

Thank you in advance for your help and advice. I am eager to learn and improve my skills in this area.

[GeorgeButler]

Hi, welcome to the forums!

Have you taken a look at the Word Guesser sample project that uses Backend Functions in a module?

Studio: Word Guesser | 8th Wall | 8th Wall

[Herman_Ptacnik]

Hi Chow!

NPM modules like Express aren’t available at the moment, but the good news is that you don’t need them to connect to external APIs like OpenAI.

You can simply use fetch() requests inside a backend function (e.g., index.ts) to handle everything. Here’s a simplified overview:

1. Backend Setup:
   Inside your backend handler file, declare your environment OpenAI API variables.

Use conditional logic like if (event.httpMethod === ‘POST’) to handle incoming requests.

Then, for specific routes (e.g., if (event.path === ‘/uploadPhoto’)), use fetch() to send the uploaded image to OpenAI’s API and process the response.

2. Connecting Backend to Frontend:
   First, import your backend module in module.js.

Then, in your 8th Wall frontend code, also import that module so you can use it.

Use fetch() in the frontend to call your backend route (e.g., /uploadPhoto) and send the photo data.

This way, you’re passing data from the front end → backend → OpenAI → and back.

No need for Express or npm installs — just clean serverless-style logic using plain JavaScript.

Hope this helps!

[chow_kenny]

Thanks for the sharing, I will try it later.

[chow_kenny]

Thanks for your sharing, really appreciate your kind help !

[chow_kenny]

Could you please tell me more information about calling OpenAI’s API in the backend service, or is there have any program template to achieve the similar effect? I am really appreciate for your help !

[chow_kenny]

I also meet a new problem in create environment variables: When I try to input the OpenAI’s API key, it showes “Key cannot exceed 128 characters”.

[GeorgeButler]

I had no idea the OpenAI API keys were that long. Let me look into seeing how we can improve this. In the meantime you could use two Environment Variables and combine it into one string in your code.

[GeorgeButler]

Hi, after taking a look at it again it looks like you’re trying to put your API key where you’re supposed to put the NAME of the value.

So in this case the key would be something like OPEN_AI_SECRET, which you would put your key in the module config when you turn off development mode.

Then in your code you’d use it like process.env.OPEN_AI_SECRET.

[chow_kenny]

Really thanks for your kind help, I will try it later

[chow_kenny]

Offical Module for OpenAI

I also founded an official 8th Wall Module for OpenAI, it supports generate image or story from text the prompt, but does it support uploading a photo to OpenAI’s server to analysis it? Thanks for your kind help!

[Herman_Ptacnik]

I’m still learning OpenAI’s API for another project I’m working on, so I’m not yet sure how to fully implement that specific functionality. But from what I’ve seen, it works like most other APIs—just use fetch() with the endpoint URL and the required options from the docs, and you should be good to go.

If you copy and paste my previous message into ChatGPT, it might help you generate the backend code you need.

After I release my game, if there’s enough interest, I’d be happy to make my database module public to help make this process easier for everyone!

[chow_kenny]

Thanks for your reply! Since I am still new to fetch() and backend development, I hope to see you publish your own database module. Good luck!

[chow_kenny]

Update 1:
I have successfully implemented the frontend functionality, which allows users to upload pictures from their computer or phone. However, I am still facing issues with the backend function. I believe the main problem lies with the environment variable and the OpenAI API key.

Here is my error log.

[GeorgeButler]

You’ll likely need to make OpenAI calls directly using fetch rather than relying on the OpenAI module as we work to port it over to Studio.

[chow_kenny]

ok, thanks for your help.

[chow_kenny]

So you mean I don’t need to make OpenAI API calls through the backend module I developed, but just use Fetch in the frontend program?

[GeorgeButler]

If you make the fetch calls directly from the frontend you’ll be exposing your API key to the client. The reason for using a backend function is to proxy your fetch calls to OpenAI through 8th Wall so the client never sees the API key.

[chow_kenny]

I attempted to store my API key in an environment variable, but the system returned an error stating, “Label cannot exceed 128 characters.” I then tried splitting the key across two environment variables and combining them into a single string in my code, but this also resulted in an error.

[GeorgeButler]

The label isn’t where you put the key. The label is how you reference the variable in code.

You put the actual key in your module config once you turn off development mode.