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 (0)