Update to use sonnet 3.5 raw predict

codemods/react-migration/output-test-gemini.txt

@@ -0,0 +1,82 @@
+
+Iterating through Ember templates; do not stop the process.
+Total found ember templates to convert: 5
+
+
+-------------------
+const AnotherScaryContract = () => (
+  <div className="spooky-contract-container">
+    <p className="contract-text">
+      By signing this contract, you agree to devote your very essence to the React
+      framework...
+    </p>
+    <p className="contract-text">Terms:</p>
+    <ul className="contract-terms">
+      <li>⚛️ Lifelong allegiance to JSX, hooks, and endless imports</li>
+      <li>💾 Relentless optimization... even when it drives you to the edge</li>
+      <li>🔄 Immortality... in the form of infinite re-renders</li>
+      <li>⚙️ Dependency hell... where "npm install" becomes both ritual and curse</li>
+      <li>💻 Obsession with clean components, though they grow ever more complex</li>
+      <li>🚫 No escape... bound forever to the virtual DOM</li>
+    </ul>
+  </div>
+);
+
+export default AnotherScaryContract;
+
+-------------------
+const InstructionTemplate = (props) => {
+  const { username } = props;
+  return (
+    <p className="contract-text">
+      Please sign these silly React contracts, {username}
+    </p>
+  );
+};
+
+export default InstructionTemplate;
+
+-------------------
+const ScaryContract = () => (
+  <div className="spooky-contract-container">
+    <p className="contract-text">
+      By signing this contract, you agree to dedicate your entire coding life to
+      the ways of React...
+    </p>
+    <p className="contract-text">Terms:</p>
+    <ul className="contract-terms">
+      <li>⚛️ Eternal commitment to component-based architecture</li>
+      <li>🔄 Endless cycles of props, state, and re-renders</li>
+      <li>🖥 Long hours debugging complex dependency arrays</li>
+      <li>📦 Frequent dependency installs... and the occasional npm crisis</li>
+      <li>🔍 Eternal search for the missing semicolon...</li>
+      <li>🚫 No escape... once imported, never unmounted!</li>
+    </ul>
+  </div>
+);
+
+export default ScaryContract;
+
+-------------------
+const SignButtonText = (props) => {
+  const { isSigned } = props;
+
+  return (
+    <>
+      {isSigned ? (
+        <p className="signature-text">Signed in blood... </p>
+      ) : (
+        <p className="signature-prompt">Sign here... if you dare.</p>
+      )}
+    </>
+  );
+};
+
+export default SignButtonText;
+
+-------------------
+const SpookyTitle = () => (
+  <h1 className="spooky-title">Beware of the Contract!</h1>
+);
+
+export default SpookyTitle;

codemods/react-migration/utils/fetch.js

@@ -2,10 +2,12 @@
 const fetch = require('node-fetch');
 
 const { ACCESS_TOKEN, PROJECT_ID } = process.env || {}; // eslint-disable-line
-const API_ENDPOINT = 'us-central1-aiplatform.googleapis.com';
-const LOCATION_ID = 'us-central1';
-const MODEL_ID = 'gemini-1.5-pro-002';
-const QUERY_URL = `https://${API_ENDPOINT}/v1/projects/${PROJECT_ID}/locations/${LOCATION_ID}/publishers/google/models/${MODEL_ID}:streamGenerateContent`;
+// claude 3.7 only available in us-east5
+const LOCATION_ID = 'us-east5';
+const API_ENDPOINT = 'us-east5-aiplatform.googleapis.com';
+const MODEL_ID = 'claude-3-5-sonnet-v2@20241022';
+const METHOD = 'rawPredict';
+const QUERY_URL = `https://${API_ENDPOINT}/v1/projects/${PROJECT_ID}/locations/${LOCATION_ID}/publishers/anthropic/models/${MODEL_ID}:${METHOD}`;
 
 // eslint-disable-next-line
 exports.fetchData = async (inputOrig = {}) => {
@@ -23,9 +25,8 @@ exports.fetchData = async (inputOrig = {}) => {
 
     const input = {
       ...inputOrig,
-      messagesArr: [message],
     };
-    const body = getRequestBody(input);
+    const body = getRequestBody(input, message);
 
     const bodyStr = JSON.stringify(body);
 
@@ -55,7 +56,7 @@ exports.fetchData = async (inputOrig = {}) => {
 const generatePrompt = ({
   examplesArr = [],
   basePromptStr = 'Convert provided Ember component template Handlebar files to React JSX.',
-  helpfulPromptStr = `Also, no need to do 'import React from "react";' for the generated code since that's no longer requested. The name of the generated React component should be an appropriate unique one (ideally based on the filename and/or parent parent directory comment on the first line if provided) based on the provided input ember code instead of using component names from the provided examples. Do not include "jsx" or "javascript" in the output like \`\`\`jsx or \`\`\`javascript. Do not modify the names of data-* attributes. If you find an uppercase child component like <FancyButton />, try to import it like import FancyButton from '../fancy-button';. Do not try to import like FancyButton from './fancy-button';.`,
+  helpfulPromptStr = `Pay attention to these instructions: Do not add 'import React from "react";'; there should be no instances of ''import React from "react";' in the output! The name of the generated React component should be an appropriate unique one (ideally based on the filename and/or parent parent directory comment on the first line if provided) based on the provided input ember code instead of using component names from the provided examples. Do not include "jsx" or "javascript" in the output like \`\`\`jsx or \`\`\`javascript. Do not modify the names of data-* attributes. If you find an uppercase child component like <FancyButton />, try to import it like import FancyButton from '../fancy-button';. Do not try to import like FancyButton from './fancy-button';. Do not explain your role; ONLY give the output of the jsx file.`,
   examplePromptStr = `Here are some examples you should follow for best practices which have an Ember template Handlebar code example and its equivalent expected React component:`,
   messagesPromptStr = `Now take your time in generating exactly one React JSX for each provided Ember Handlebar template (from the request messages array field).`,
 } = {}) => {
@@ -83,40 +84,38 @@ const generatePrompt = ({
   return prompt;
 };
 
-const getRequestBody = (input = {}) => {
-  const { messagesArr } = input || {};
+const getRequestBody = (input = {}, message) => {
   const context = generatePrompt(input);
 
   const body = {
-    contents: messagesArr.map((message) => ({
-      role: 'user',
-      parts: [{ text: message }],
-    })),
-    systemInstruction: {
-      role: 'system',
-      parts: [{ text: context }],
-    },
+    anthropic_version: 'vertex-2023-10-16',
+    stream: false,
+    max_tokens: 512,
+    temperature: 0.5,
+    top_p: 0.95,
+    top_k: 1,
+    messages: [
+      {
+        role: 'user',
+        content: [
+          {
+            type: 'text',
+            text: `${context} ${message}`,
+          },
+        ],
+      },
+    ],
   };
+
   return body;
 };
 
 const getResponse = async (data = {}) => {
   try {
     const responseBody = await data.text();
-    const response = JSON.parse(responseBody);    
-
-    // Extract and concatenate text parts from the response
-    const outputText = response
-      .map((item) =>
-        item.candidates
-          .map((candidate) =>
-            candidate.content.parts.map((part) => part.text).join('')
-          )
-          .join('')
-      )
-      .join('');
-
-    return outputText;
+    const response = JSON.parse(responseBody);
+
+    return response.content[0].text;
   } catch (err) {
     console.error(err);
     throw err;