From 21b84579d47b4af8780b21891ea8a4736012f8cb Mon Sep 17 00:00:00 2001 From: Jack Howard Date: Thu, 13 Mar 2025 12:40:55 -0500 Subject: [PATCH 1/3] Update call --- codemods/react-migration/utils/fetch.js | 62 ++++++++++++------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/codemods/react-migration/utils/fetch.js b/codemods/react-migration/utils/fetch.js index fbb99c5..1a15b9a 100644 --- a/codemods/react-migration/utils/fetch.js +++ b/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-7-sonnet@20250219'; +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 , 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";' for the generated code since React is already defined. 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 , 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,39 @@ 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}`, + }, + ], + }, + ], }; + + // console.log(util.inspect(body, { showHidden: false, depth: null })); 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; From b11761152f3f980fa60aa87f753aa0880f79276d Mon Sep 17 00:00:00 2001 From: Jack Howard Date: Thu, 13 Mar 2025 12:48:44 -0500 Subject: [PATCH 2/3] Update to use sonnet 3.5 --- .../react-migration/output-test-gemini.txt | 82 +++++++++++++++++++ codemods/react-migration/utils/fetch.js | 4 +- 2 files changed, 84 insertions(+), 2 deletions(-) diff --git a/codemods/react-migration/output-test-gemini.txt b/codemods/react-migration/output-test-gemini.txt index e69de29..ee85cdf 100644 --- a/codemods/react-migration/output-test-gemini.txt +++ b/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 = () => ( +
+

+ By signing this contract, you agree to devote your very essence to the React + framework... +

+

Terms:

+
    +
  • ⚛️ Lifelong allegiance to JSX, hooks, and endless imports
    • +
  • 💾 Relentless optimization... even when it drives you to the edge
    • +
  • 🔄 Immortality... in the form of infinite re-renders
    • +
  • ⚙️ Dependency hell... where "npm install" becomes both ritual and curse
    • +
  • 💻 Obsession with clean components, though they grow ever more complex
    • +
  • 🚫 No escape... bound forever to the virtual DOM
    • +
+
+); + +export default AnotherScaryContract; + +------------------- +const InstructionTemplate = (props) => { + const { username } = props; + return ( +

+ Please sign these silly React contracts, {username} +

+ ); +}; + +export default InstructionTemplate; + +------------------- +const ScaryContract = () => ( +
+

+ By signing this contract, you agree to dedicate your entire coding life to + the ways of React... +

+

Terms:

+
    +
  • ⚛️ Eternal commitment to component-based architecture
    • +
  • 🔄 Endless cycles of props, state, and re-renders
    • +
  • 🖥 Long hours debugging complex dependency arrays
    • +
  • 📦 Frequent dependency installs... and the occasional npm crisis
    • +
  • 🔍 Eternal search for the missing semicolon...
    • +
  • 🚫 No escape... once imported, never unmounted!
    • +
+
+); + +export default ScaryContract; + +------------------- +const SignButtonText = (props) => { + const { isSigned } = props; + + return ( + <> + {isSigned ? ( +

Signed in blood...

+ ) : ( +

Sign here... if you dare.

+ )} + + ); +}; + +export default SignButtonText; + +------------------- +const SpookyTitle = () => ( +

Beware of the Contract!

+); + +export default SpookyTitle; diff --git a/codemods/react-migration/utils/fetch.js b/codemods/react-migration/utils/fetch.js index 1a15b9a..b325e57 100644 --- a/codemods/react-migration/utils/fetch.js +++ b/codemods/react-migration/utils/fetch.js @@ -5,7 +5,7 @@ const { ACCESS_TOKEN, PROJECT_ID } = process.env || {}; // eslint-disable-line // 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-7-sonnet@20250219'; +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}`; @@ -56,7 +56,7 @@ exports.fetchData = async (inputOrig = {}) => { const generatePrompt = ({ examplesArr = [], basePromptStr = 'Convert provided Ember component template Handlebar files to React JSX.', - helpfulPromptStr = `Pay attention to these instructions: Do not add 'import React from "react";' for the generated code since React is already defined. 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 , 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.`, + 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 , 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).`, } = {}) => { From 84f80850591e9f802412c8dbbb7795625f4727a4 Mon Sep 17 00:00:00 2001 From: Jack Howard Date: Thu, 13 Mar 2025 12:53:04 -0500 Subject: [PATCH 3/3] Update log --- codemods/react-migration/utils/fetch.js | 1 - 1 file changed, 1 deletion(-) diff --git a/codemods/react-migration/utils/fetch.js b/codemods/react-migration/utils/fetch.js index b325e57..ae541d6 100644 --- a/codemods/react-migration/utils/fetch.js +++ b/codemods/react-migration/utils/fetch.js @@ -107,7 +107,6 @@ const getRequestBody = (input = {}, message) => { ], }; - // console.log(util.inspect(body, { showHidden: false, depth: null })); return body; };