How to make openai api return same code i give but values changed?

API
1

Hi!

I’m new here and i’ve been trying to find a topic like mine but so far i haven’t so i’m making my own.

I’m working in vue 3 and with the openai package. So far i get a response but i’m trying to get a response with the specific code I give just for the values to be changed.

Currently this is my code with my api-key removed for obvious reasons.

<template>
    <div class="container">
      <h2 class="text-white">AnimeJS Questions</h2>
      <div class="form-group">
        <label for="question" class="text-white">Question:</label>
        <input
          type="text"
          id="question"
          class="form-control"
          v-model="question"
          placeholder="Enter your question"
        />
      </div>
      <button @click="sendQuestion" class="btn btn-primary bg-white" :disabled="loading">
        {{ loading ? 'Sending Question...' : 'Send Question' }}
      </button>
    </div>
  </template>
  
  <script>
  import OpenAI from "openai";
  const openai = new OpenAI({
    apiKey: '*******************',
    dangerouslyAllowBrowser: true,
  });
  const puppetCode = `this.puppet('#rightArm', translatXValues, rotateValues);
      this.puppet('#leftArm', translatXValues, rotateValues);
      this.puppet('#leftLeg', translatXValues, rotateValues);
      this.puppet('#rightLeg', translatXValues, rotateValues);
      this.puppet('#body', translatXValues, rotateValues);
      this.puppet('#head', translatXValues, rotateValues);`;

  const animeCode = `puppet(target, translatXValues, rotateValues){
        anime({
          targets: target,
          rotate: rotateValues,
          translateX: translatXValues,
          easing: 'easeInOutQuad',
          duration,
          loop: true,
          direction: 'alternate',
          transformOrigin: '100 100',
        });
      },`;
  
  export default {
    data() {
      return {
        question: "",
        response: null,
        loading: false,
      };
    },
    methods: {
      async sendQuestion() {
        const question = `Return this ${puppetCode} but change the values so that my puppet ${this.question}. My puppet function looks like this ${animeCode}`;
  
        try {
          const completion = await openai.chat.completions.create({
            messages: [
              {
                role: "system",
                content: "You are a helpful assistant designed to output JSON.",
              },
              { role: "user", content: question },
            ],
            model: "gpt-3.5-turbo-1106",
          });
  
          // console.log(completion.choices[0].message.content);
          if (completion.choices[0].message.content) this.emitter.emit('openai', `${completion.choices[0].message.content}`)
          

        } catch (error) {
          console.error(error);
        } 
      },
    },
  };
  </script>
  
  <style scoped>
  .container {
    background-color: #121212;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    height: 50%;
  }
  .form-group label {
    margin-bottom: 10px;
  }
  .form-control {
    margin-bottom: 20px;
  }
  </style>

I just want the values changed so my puppet can do whatever the person asks what they should do. So far the responses look like this:
{
“puppetCommands”: [
{
“target”: “#rightArm”,
“translatXValues”: “10px”,
“rotateValues”: “10deg”
},
{
“target”: “#leftArm”,
“translatXValues”: “-10px”,
“rotateValues”: “-10deg”
},
{
“target”: “#leftLeg”,
“translatXValues”: “-5px”,
“rotateValues”: “5deg”
},
{
“target”: “#rightLeg”,
“translatXValues”: “5px”,
“rotateValues”: “-5deg”
},
{
“target”: “#body”,
“translatXValues”: “0px”,
“rotateValues”: “0deg”
},
{
“target”: “#head”,
“translatXValues”: “0px”,
“rotateValues”: “0deg”
}
]
}

Anyone that can help me?