DEV Community

Alexandr K
Alexandr K

Posted on

React Native and OpenAI

Hello.

I've just developed the simple application using OpenAI / ChatGPT and had a lot of fun and how easy it was.

App preview

I know the app is really joke but anyway I liked the ability to pass the image and ask the specific questions about it.

For me it's really the first experience and probably it's really too obvious for a lot of developers who are involved now in using AI models for their applications.

Lets see the communication function and it would be really clean enough what the app does.

const sendMessage = async (image_url: string, language: AppLanguage) => {
  try {
    const openai = new OpenAI({
      apiKey: OPENAI_API_KEY, // This is the default and can be omitted
    });

    const { data: completion } = await openai.chat.completions
      .create({
        model: "gpt-4-turbo",
        stream: false,
        messages: [
          {
            role: "system",
            content: `
You are palm reader, explain by reading palm the user background, life, future, fate. Please write at least 10 setences about each topic:
- user line of life
- user line of heart
- user line of mind
- user line of fate
- user extra information that we need to mention

Only provide a RFC8259 compliant JSON response:
[
  {
    "line_life": "user line of life",
    "line_heart": "user line of heart",
    "line_mind": "user line of mind",
    "line_fate": "user line of fate",
    "line_extra": "user extra information"
  }
]`,
          },
          {
            role: "user",
            content: [
              {
                type: "text",
                text: `
- user line of life, 10+ sentences
- user line of heart, 10+ sentences
- user line of mind, 10+ sentences
- user line of fate, 10+ sentences
- user extra information that we need to mention, 10+ sentences
                `,
              },
              {
                type: "text",
                text: `Use language ${language} for answers.`,
              },
              {
                type: "text",
                text: 'Describe my palm but in format { "line_heart": "text...", "line_life": "text...", "line_mind": "text...", "line_fate": "text...", "line_extra": "text..." }',
              },
              {
                type: "image_url",
                image_url: {
                  url: `data:image/jpeg;base64,${image_url}`,
                },
              },
            ],
          },
        ],
      })
      .withResponse();

    const replies = completion.choices
      .flatMap((choice) => {
        try {
          if (choice.message.content === null || choice.message.content === undefined) {
            return [];
          } else {
            const messages = JSON.parse(choice.message.content);

            return messages;
          }
        } catch (error) {
          Sentry.Native.captureException(error);

          return [];
        }
      })
      .reduce((acc, cur) => ({ ...acc, ...cur }), {});

    return replies;
  } catch (error) {
    Sentry.Native.captureException(error);
  }
};
Enter fullscreen mode Exit fullscreen mode

As you can see I used the specific prompts to output the responses in json and pass the image to analyze it. Also I localized the app by using en, es, de, fr, ru languages and saying to ChatGPT to respond me in specific language and it works out of the box. it's really math magic. :)

Of course I will publish the app but the huge problem for now that it's really expensive to ask gpt-4-turbo and probably the app will stay for awhile and then I would need to disable it.

Top comments (6)

Collapse
 
depombo profile image
L. Fernando De Pombo

I think if you publish the app it would also expose our openAI key no?

Collapse
 
oivoodoo profile image
Alexandr K

it would be possible to expose the key but in the same time it's the demo. it's better to make the proxy server for openai api anyway. but such app like a pet project and billing limits, it would be ok.

Collapse
 
depombo profile image
L. Fernando De Pombo

got it, if it's intended for a demo/toy app it makes sense

Thread Thread
 
oivoodoo profile image
Alexandr K • Edited

found your project :) backmesh.com I know why you mentioned it. actually it's good idea to have it as a saas for lazy devs.

Thread Thread
 
depombo profile image
L. Fernando De Pombo

would you say firebase is for lazy devs? ;) a lot of the authentication, authorization, rate limiting would still need to be implemented in the backend. will also be adding other features people have asked for like prompt scrubbing and so forth

Thread Thread
 
oivoodoo profile image
Alexandr K

didn't mean anything special. good luck with your project!