Merge pull request #4 from luzmo-official/chore/add-embedded-ai-chart…

…-showcase

chore: add embedded ai chart showcase

embedded-ai-chart/.gitignore

@@ -0,0 +1,25 @@
+# Ignore node_modules directory
+node_modules/
+
+# Ignore log files
+*.log
+
+# Ignore environment files
+.env
+.env.local
+.env.*.local
+.env.production
+.env.test
+
+# Ignore build output
+build/
+dist/
+*.zip
+
+# Ignore angular cache
+.angular/
+
+# Ignore local config
+**/config/local*
+
+.DS_Store

embedded-ai-chart/README.md

@@ -0,0 +1,24 @@
+# ai-showcases
+A demo of an embedded AI chart generator using the Luzmo API and composability.
+
+## Usage
+To use this project, follow these steps:
+
+1. Clone the repository to your local machine.
+2. Create an `.env` file in the `backend` folder containing a the following info: <br>
+  LUZMO_API_KEY=`<the luzmo api key>`<br>
+  LUZMO_API_TOKEN=`<the luzmo api token>`<br>
+3. Install the dependencies in frontend & backend folder by running `npm install`.
+4. Create a local config file: `backend/config/local.cjs`
+```
+module.exports = {
+  local: true,
+  port: 4000,
+  luzmo: {
+      apiToken: '<your api token>',
+      apiKey: '<your api key>',
+  },
+};
+```
+4. Run the backend `cd backend && node index.js`
+5. Run the frontend `cd frontend && ng serve`

embedded-ai-chart/backend/config/custom-environment-variables.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  port: 'PORT',
+  luzmo: {
+    apiKey: 'LUZMO_API_KEY',
+    apiToken: 'LUZMO_API_TOKEN',
+  },
+};

embedded-ai-chart/backend/config/default.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  luzmo: {
+    apiToken: undefined,
+    apiKey: undefined,
+  },
+  port: undefined,
+  local: false,
+};

embedded-ai-chart/backend/helpers.js

@@ -0,0 +1,39 @@
+import Luzmo from '@luzmo/nodejs-sdk';
+import config from 'config';
+
+export const client = new Luzmo({
+  api_key: config.get('luzmo.apiKey'),
+  api_token: config.get('luzmo.apiToken'),
+});
+
+export const retrieveAiChart = async ({
+  dataset_id,
+  question,
+  message_history = [],
+}) => {
+  const response = await client.create('aichart', {
+    type: 'generate-chart',
+    dataset_id,
+    question,
+    message_history,
+  });
+  return response;
+};
+
+export const retrieveEmbedToken = async ({
+  dashboard_ids = [],
+  dataset_ids = [],
+}) => {
+  const token = await client.create('authorization', {
+    type: 'embed',
+    expiry: new Date(new Date().getTime() + 1 * 60 * 60000).toISOString(),
+    username: 'ai-showcases',
+    name: 'AI showcases',
+    email: '[email protected]',
+    access: {
+      dashboards: dashboard_ids.map((id) => ({ id, rights: 'use' })),
+      datasets: dataset_ids.map((id) => ({ id, rights: 'use' })),
+    },
+  });
+  return token;
+};

embedded-ai-chart/backend/index.js

@@ -0,0 +1,60 @@
+import config from 'config';
+
+import { retrieveAiChart, retrieveEmbedToken } from './helpers.js';
+import { setupLocalServer } from './local.js';
+
+export const handler = async (event) => {
+  const path = event.rawPath;
+  const body = JSON.parse(event.body);
+  console.log('Received request:', path, body);
+
+  const { dataset_id, question, message_history = [] } = body;
+
+  if (path === '/retrieve-ai-chart') {
+    try {
+      const response = await retrieveAiChart({
+        dataset_id,
+        question,
+        message_history,
+      });
+      return {
+        statusCode: 200,
+        body: JSON.stringify(response),
+      };
+    } catch (error) {
+      console.error(error);
+      return {
+        statusCode: 500,
+        body: JSON.stringify(error),
+      };
+    }
+  }
+
+  if (path === '/retrieve-embed-token') {
+    const { dashboard_ids = [], dataset_ids = [] } = body;
+
+    try {
+      const token = await retrieveEmbedToken({ dashboard_ids, dataset_ids });
+      return {
+        statusCode: 200,
+        body: JSON.stringify({ result: 'success', token }),
+      };
+    } catch (error) {
+      console.error(error);
+      return {
+        statusCode: 500,
+        body: JSON.stringify(error),
+      };
+    }
+  }
+
+  return {
+    statusCode: 404,
+    body: JSON.stringify({ error: 'Path Not Found' }),
+  };
+};
+
+// Used for local development
+if (config.get('local')) {
+  setupLocalServer();
+}

embedded-ai-chart/backend/local.js

@@ -0,0 +1,43 @@
+import cors from 'cors';
+import express from 'express';
+import config from 'config';
+
+import { retrieveAiChart, retrieveEmbedToken } from './helpers.js';
+
+export const setupLocalServer = () => {
+  const app = express();
+  const port = config.get('port');
+
+  app.use(express.json());
+  app.use(cors());
+
+  app.post('/retrieve-ai-chart', async (req, res) => {
+    const { dataset_id, question, message_history = [] } = req.body;
+
+    try {
+      const response = await retrieveAiChart({
+        dataset_id,
+        question,
+        message_history,
+      });
+      res.status(200).json(response);
+    } catch (error) {
+      res.status(500).json(error);
+    }
+  });
+
+  app.post('/retrieve-embed-token', async (req, res) => {
+    const { dashboard_ids = [], dataset_ids = [] } = req.body;
+
+    try {
+      const token = await retrieveEmbedToken({ dashboard_ids, dataset_ids });
+      res.status(200).json({ result: 'success', token });
+    } catch (error) {
+      res.status(500).json(error);
+    }
+  });
+
+  app.listen(port, () => {
+    console.log(`Server running at http://localhost:${port}`);
+  });
+};