Merge pull request #65 from feedzai/develop

Code for release 3.0.0

Author: DiogoRDuarte

CHANGELOG.md

@@ -12,6 +12,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Implemented i18n alternatives as the new "internationalization" property
 - Fixed tests / github pipeline errors
 - Adapted the ShortcutGuide to vary between "Alt" and "option" depending on the OS
+- Added support for OpenAI API-compatible providers via the new `baseUrl` prop
+- Added new i18n Cypress tests
+- Added Arrow Navigation to the ShortcutGuide
+
+### Changed
+
+- Replaced arrow symbols with text on the ShortcutGuide
+- Re-did ShortcutGuide `<dl>` structure
+- Moved the context prop to inside autoDescriptions
 
 ## 2.0.4 - 2025-01-06
 

README.md

@@ -0,0 +1,43 @@
+/* eslint-disable no-undef */
+describe("Internationalization Tests", () => {
+	it("should use default English (en-GB) language when internationalization property is empty", () => {
+		cy.visit("/");
+		cy.injectAxe();
+		cy.findByTestId("manual-descriptions-option").click();
+		cy.wait(500);
+		cy.findAllByTestId("a11y_desc").first().focus();
+		cy.focused().type("{alt}k");
+		cy.findAllByTestId("a11y-chart-alert").first().should("contain.text", "The average is");
+		cy.focused().type("?");
+		cy.get("dialog").should("be.visible");
+		cy.get("dialog h2").should("contain.text", "Shortcut guide");
+		cy.focused().type("{esc}");
+		cy.checkA11y();
+	});
+
+	it("should use default Portuguese (pt-PT) language when language property is pt-PT", () => {
+		cy.visit("/");
+		cy.injectAxe();
+		cy.findByTestId("manual-descriptions-option").click();
+		cy.wait(500);
+		cy.findAllByTestId("a11y_desc").first().focus().tab().tab();
+		cy.focused().type("{alt}k");
+		cy.findAllByTestId("a11y-chart-alert").eq(2).should("contain.text", "A média é");
+		cy.focused().type("?");
+		cy.get("dialog").should("be.visible");
+		cy.get("dialog h2").should("contain.text", "Guia de atalhos");
+		cy.checkA11y();
+	});
+
+	it("should use an overriten en-GB string", () => {
+		cy.visit("/");
+		cy.injectAxe();
+		cy.findByTestId("manual-descriptions-option").click();
+		cy.wait(500);
+		cy.findAllByTestId("a11y_desc").first().focus().tab().tab();
+		cy.focused().type("?");
+		cy.get("dialog").should("be.visible");
+		cy.get("dialog h2").should("contain.text", "Overwritten Shortcut guide title");
+		cy.checkA11y();
+	});
+});

cypress/e2e/internationalization.cy.js

@@ -7,6 +7,8 @@ import CardGridManual from "./components/manual/ChartGridManual";
 
 function Homepage() {
 	const [apiKey, setApiKey] = useState("");
+	const [model, setModel] = useState("gpt-3.5-turbo");
+	const [baseUrl, setBaseUrl] = useState("https://api.openai.com/v1/");
 	const [isValid, setIsValid] = useState(false);
 	const [automatic, setAutomatic] = useState(false);
 	const [manual, setManual] = useState(false);
@@ -38,7 +40,7 @@ function Homepage() {
 			{isValid && apiKey !== "" ? (
 				<>
 					<div style={{ marginTop: 20 }}>
-						<CardGrid apiKey={apiKey} setHome={setHome} />
+						<CardGrid apiKey={apiKey} model={model} baseUrl={baseUrl} setHome={setHome} />
 					</div>
 					<p>
 						Data from{" "}
@@ -64,6 +66,10 @@ function Homepage() {
 					<KeyRequest
 						apiKey={apiKey}
 						setApiKey={setApiKey}
+						model={model}
+						setModel={setModel}
+						baseUrl={baseUrl}
+						setBaseUrl={setBaseUrl}
 						isValid={isValid}
 						setIsValid={setIsValid}
 						home={home}
@@ -72,16 +78,7 @@ function Homepage() {
 					/>
 				</div>
 			) : home ? (
-				<Options
-					apiKey={apiKey}
-					setApiKey={setApiKey}
-					isValid={isValid}
-					setIsValid={setIsValid}
-					automatic={automatic}
-					setAutomatic={setAutomatic}
-					manual={manual}
-					setManual={setManual}
-				/>
+				<Options setAutomatic={setAutomatic} setManual={setManual} />
 			) : (
 				<p></p>
 			)}

examples/src/Homepage.jsx

@@ -3,30 +3,55 @@ import CardContent from "@mui/material/CardContent";
 import Typography from "@mui/material/Typography";
 import "./assets/style/Options.css";
 
-const KeyRequest = ({ apiKey, setApiKey, setIsValid, setHome }) => {
+const KeyRequest = ({
+	apiKey,
+	setApiKey,
+	model,
+	setModel,
+	baseUrl,
+	setBaseUrl,
+	setIsValid,
+	setHome,
+}) => {
 	setHome(false);
 
-	const handleChanges = (e) => {
+	const isValidOpenAiApiKey = (key) => {
+		return key.startsWith("sk-proj-");
+	};
+
+	const isOpenAiApi = (baseUrl) => {
+		const parsedBaseUrl = URL.parse(baseUrl);
+
+		if (parsedBaseUrl) {
+			return parsedBaseUrl.host === "api.openai.com";
+		}
+
+		return false;
+	};
+
+	const handleApiKeyChange = (e) => {
 		setApiKey(e.target.value);
 	};
 
+	const handleModelChange = (e) => {
+		setModel(e.target.value);
+	};
+
+	const handleBaseUrl = (e) => {
+		setBaseUrl(e.target.value);
+	};
+
 	const handleSubmit = (e) => {
 		e.preventDefault();
-		if (isValidApiKey(apiKey)) {
-			setIsValid(true);
-		} else {
-			alert(
-				"The API key should start with 'sk-' and be followed by a string of exactly 48 alphanumeric characters.",
-			);
+
+		if (isOpenAiApi(baseUrl) && !isValidOpenAiApiKey(apiKey)) {
+			alert("The OpenAI API key should start with 'sk-proj-'.");
 			setIsValid(false);
+		} else {
+			setIsValid(true);
 		}
 	};
 
-	const isValidApiKey = (key) => {
-		const apiKeyPattern = /^sk-(proj-)?[a-zA-Z0-9]{48}$/;
-		return apiKeyPattern.test(key);
-	};
-
 	return (
 		<>
 			<div id="cardContainer">
@@ -38,28 +63,45 @@ const KeyRequest = ({ apiKey, setApiKey, setIsValid, setHome }) => {
 							<Typography variant="body2" color="text.secondary" style={{ whiteSpace: "pre-wrap" }}>
 								Please provide an{" "}
 								<a href="https://platform.openai.com/account/api-keys" target="_blank">
-									OpenAI API key
+									OpenAI
 								</a>{" "}
-								(the key is not saved). <br></br>The API key should start with 'sk-' and be followed
-								by a string of exactly 48 alphanumeric characters.
+								or OpenAI-compatible API key (the key is not saved). <br></br>The OpenAI API key
+								should start with 'sk-proj-'.
 							</Typography>
 							<br />
 							<label>
-								API Key:{" "}
+								API key:{" "}
 								<input
 									type="text"
-									placeholder="sk-... OR sk-proj-..."
+									required
+									placeholder="sk-proj-... OR ..."
 									value={apiKey}
-									onChange={handleChanges}
+									onChange={handleApiKeyChange}
 								/>
 							</label>
+							<br />
+							<label>
+								Model: <input type="text" required value={model} onChange={handleModelChange} />
+							</label>
+							<br />
+							<label>
+								Base URL:{" "}
+								<input
+									type="url"
+									required
+									pattern="^https://.*|^http://localhost:\d+.*"
+									value={baseUrl}
+									onChange={handleBaseUrl}
+								/>
+							</label>
+							<br />
 							<button type="submit" tabIndex={0}>
 								Submit
 							</button>
 						</form>
-						{apiKey.length > 0 && !isValidApiKey(apiKey) && (
+						{apiKey.length > 0 && !isValidOpenAiApiKey(apiKey) && isOpenAiApi(baseUrl) && (
 							<p style={{ color: "red" }} role="alert">
-								Invalid API key format.
+								Invalid OpenAI API key format.
 							</p>
 						)}
 					</CardContent>

examples/src/KeyRequest.jsx

@@ -20,8 +20,9 @@ const Options = ({ setAutomatic, setManual }) => {
 						<CardContent>
 							<h2>Option A</h2> <h3>Automatic Descriptions</h3>
 							<Typography variant="body2" color="text.secondary" style={{ whiteSpace: "pre-wrap" }}>
-								The descriptions for each chart are generated in the moment using a GPT model.
-								Because of that, <b> an OpenAI API key is needed.</b>
+								The descriptions for each chart are generated by an OpenAI model or one accessible
+								via an OpenAI-compatible API. Because of that,{" "}
+								<b>an OpenAI or OpenAI-compatible API key is needed.</b>
 							</Typography>
 						</CardContent>
 					</CardActionArea>
@@ -32,8 +33,9 @@ const Options = ({ setAutomatic, setManual }) => {
 							<h2>Option B</h2>
 							<h3>Manual Descriptions</h3>
 							<Typography variant="body2" color="text.secondary" style={{ whiteSpace: "pre-wrap" }}>
-								The descriptions for each chart were previously generated using a GPT model. They
-								were then manually added to each chart. <b>No OpenAI API key is needed.</b>
+								The descriptions for each chart were previously generated using an OpenAI model.
+								They were then manually added to each chart.{" "}
+								<b>No OpenAI or OpenAI-compatible API key is needed.</b>
 							</Typography>
 						</CardContent>
 					</CardActionArea>

examples/src/Options.jsx

@@ -9,7 +9,7 @@ import { chartDimensions } from "./chart.constants.js";
 import { AutoVizuA11y } from "@feedzai/autovizua11y";
 import transformJSON from "../../data/transformJSON.js";
 
-function BarChart({ apiKey }) {
+function BarChart({ apiKey, model, baseUrl }) {
 	const intValuesCountryData = countryData.map((country) => {
 		return {
 			...country, //copies all countrys first...
@@ -110,7 +110,8 @@ function BarChart({ apiKey }) {
 				autoDescriptions={{
 					dynamicDescriptions: false,
 					apiKey: apiKey,
-					model: "gpt-3.5-turbo",
+					model: model,
+					baseUrl: baseUrl,
 					temperature: 0.1,
 				}}
 			>

examples/src/components/automatic/BarChartAutomatic.jsx

@@ -10,64 +10,72 @@ import Heatmap from "./HeatmapAutomatic";
 import StackedBar from "./StackedBarAutomatic";
 import Scatterplot from "./ScatterplotAutomatic";
 
-function CardGrid({ apiKey, setHome }) {
+function CardGrid({ apiKey, model, baseUrl, setHome }) {
 	setHome(false);
 	return (
 		<Grid container direction="row" spacing={2} justifyContent="center" alignItems="center">
 			<Grid item>
 				<Card sx={{ minWidth: 275, width: 450 }}>
 					<CardContent>
-						<BarChart apiKey={apiKey}></BarChart>
+						<BarChart apiKey={apiKey} model={model} baseUrl={baseUrl}></BarChart>
 					</CardContent>
 				</Card>
 			</Grid>
 			<Grid item>
 				<Card sx={{ minWidth: 275, width: 450 }}>
 					<CardContent>
-						<SingleSeriesTimeline apiKey={apiKey}></SingleSeriesTimeline>
+						<SingleSeriesTimeline
+							apiKey={apiKey}
+							model={model}
+							baseUrl={baseUrl}
+						></SingleSeriesTimeline>
 					</CardContent>
 				</Card>
 			</Grid>
 			<Grid item>
 				<Card sx={{ minWidth: 275, width: 450 }}>
 					<CardContent>
-						<MultiSeriesTimeline apiKey={apiKey}></MultiSeriesTimeline>
+						<MultiSeriesTimeline
+							apiKey={apiKey}
+							model={model}
+							baseUrl={baseUrl}
+						></MultiSeriesTimeline>
 					</CardContent>
 				</Card>
 			</Grid>
 
 			<Grid item>
 				<Card sx={{ minWidth: 275, width: 450 }}>
 					<CardContent>
-						<Pie_ apiKey={apiKey}></Pie_>
+						<Pie_ apiKey={apiKey} model={model} baseUrl={baseUrl}></Pie_>
 					</CardContent>
 				</Card>
 			</Grid>
 			<Grid item>
 				<Card sx={{ minWidth: 275, width: 450 }}>
 					<CardContent>
-						<Treemap_ apiKey={apiKey}></Treemap_>
+						<Treemap_ apiKey={apiKey} model={model} baseUrl={baseUrl}></Treemap_>
 					</CardContent>
 				</Card>
 			</Grid>
 			<Grid item>
 				<Card sx={{ minWidth: 275, width: 450 }}>
 					<CardContent>
-						<Heatmap apiKey={apiKey}></Heatmap>
+						<Heatmap apiKey={apiKey} model={model} baseUrl={baseUrl}></Heatmap>
 					</CardContent>
 				</Card>
 			</Grid>
 			<Grid item>
 				<Card sx={{ minWidth: 275, width: 450 }}>
 					<CardContent>
-						<StackedBar apiKey={apiKey}></StackedBar>
+						<StackedBar apiKey={apiKey} model={model} baseUrl={baseUrl}></StackedBar>
 					</CardContent>
 				</Card>
 			</Grid>
 			<Grid item>
 				<Card sx={{ minWidth: 275, width: 450 }}>
 					<CardContent>
-						<Scatterplot apiKey={apiKey}></Scatterplot>
+						<Scatterplot apiKey={apiKey} model={model} baseUrl={baseUrl}></Scatterplot>
 					</CardContent>
 				</Card>
 			</Grid>

examples/src/components/automatic/ChartGrid.jsx

@@ -9,7 +9,7 @@ import { Axis } from "@visx/axis";
 import { AutoVizuA11y } from "@feedzai/autovizua11y";
 import transformJSON from "../../data/transformJSON.js";
 
-function Heatmap({ apiKey }) {
+function Heatmap({ apiKey, model, baseUrl }) {
 	const intValuesCountryData = countryData.map((country) => {
 		return {
 			...country, //copies all countrys first...
@@ -211,7 +211,8 @@ function Heatmap({ apiKey }) {
 				autoDescriptions={{
 					dynamicDescriptions: false,
 					apiKey: apiKey,
-					model: "gpt-3.5-turbo",
+					model: model,
+					baseUrl: baseUrl,
 					temperature: 0.1,
 				}}
 			>

examples/src/components/automatic/HeatmapAutomatic.jsx

@@ -8,7 +8,7 @@ import { chartDimensions } from "./chart.constants.js";
 import { AutoVizuA11y } from "@feedzai/autovizua11y";
 import transformJSONmulti from "../../data/transformJSONmulti.js";
 
-function MultiSeriesTimeline({ apiKey }) {
+function MultiSeriesTimeline({ apiKey, model, baseUrl }) {
 	const intValuesCountryData = countryData.map((country) => {
 		return {
 			...country, //copies all countrys first...
@@ -140,7 +140,8 @@ function MultiSeriesTimeline({ apiKey }) {
 				autoDescriptions={{
 					dynamicDescriptions: false,
 					apiKey: apiKey,
-					model: "gpt-3.5-turbo",
+					model: model,
+					baseUrl: baseUrl,
 					temperature: 0.1,
 				}}
 			>