diff --git a/package-lock.json b/package-lock.json
index 39991bd..40e6ea1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "websocket-demo",
"version": "0.1.0",
"dependencies": {
+ "@fal-ai/serverless-client": "^0.6.0-alpha.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@@ -2378,6 +2379,11 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
+ "node_modules/@fal-ai/serverless-client": {
+ "version": "0.6.0-alpha.4",
+ "resolved": "https://registry.npmjs.org/@fal-ai/serverless-client/-/serverless-client-0.6.0-alpha.4.tgz",
+ "integrity": "sha512-T9fqiMU1LohzzqsNZjY4zq8ZMxJcZo8eYvSXaz2i6nmb9sQxuQ4hCB/YTeZJ2Ong4P+ZOMkHPMD2kW4pNgf5gw=="
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
diff --git a/package.json b/package.json
index e72acdf..687dd23 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@fal-ai/serverless-client": "^0.6.0-alpha.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
diff --git a/public/index.html b/public/index.html
index aa069f2..e65acb3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,4 +1,4 @@
-
+
diff --git a/src/App.css b/src/App.css
index 74b5e05..79239d6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,7 @@
.App {
text-align: center;
+ display: flex;
+ flex-direction: row;
}
.App-logo {
diff --git a/src/App.js b/src/App.js
index eff1cea..c2f685c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,70 +1,22 @@
-import React, { useRef, useEffect, useCallback, useMemo, useState } from 'react';
-import { debounce } from 'lodash';
+import * as fal from '@fal-ai/serverless-client';
+import { useEffect, useRef, useState } from 'react';
-const DEBOUNCE_TIME = 0.1; // Adjust as needed
-const URL = "wss://110602490-lcm-sd15-i2i.gateway.alpha.fal.ai/ws";
+const APP_ID = '110602490-lcm-plexed-sd15-i2i';
+const PROMPT = 'A moon in a starry night sky';
const CIRCLE_RADIUS = 80; // Radius of the circle
function App() {
const canvasRef = useRef(null);
- const webSocketRef = useRef(null);
- const isReconnecting = useRef(false);
const [receivedImage, setReceivedImage] = useState(null);
- const connect = useCallback(() => {
- webSocketRef.current = new WebSocket(URL);
- webSocketRef.current.onopen = () => {
- console.log('WebSocket Open');
- };
-
- webSocketRef.current.onclose = () => {
- console.log('WebSocket Close');
- };
-
- webSocketRef.current.onerror = (error) => {
- console.error("WebSocket Error:", error);
- };
-
- webSocketRef.current.onmessage = (message) => {
- try {
- const data = JSON.parse(message.data);
- console.log("WebSocket Message:", data);
- if (data.images && data.images.length > 0) {
- setReceivedImage(data.images[0].url);
- }
- } catch (e) {
- console.error("Error parsing the WebSocket response:", e);
+ const { send: sendCurrentData } = fal.realtime.connect(APP_ID, {
+ connectionKey: 'fal-realtime-example',
+ onResult: (result) => {
+ if (result.images && result.images[0]) {
+ setReceivedImage(result.images[0].url);
}
- };
- }, []);
-
- const disconnect = useCallback(() => {
- webSocketRef.current?.close();
- }, []);
-
- const sendMessage = useCallback(async (message) => {
- if (!isReconnecting.current && webSocketRef.current?.readyState !== WebSocket.OPEN) {
- isReconnecting.current = true;
- connect();
- }
-
- if (isReconnecting.current && webSocketRef.current?.readyState !== WebSocket.OPEN) {
- await new Promise((resolve) => {
- const checkConnection = setInterval(() => {
- if (webSocketRef.current?.readyState === WebSocket.OPEN) {
- clearInterval(checkConnection);
- resolve();
- }
- }, 100);
- });
- isReconnecting.current = false;
- }
- webSocketRef.current?.send(message);
- }, [connect]);
-
- const sendCurrentData = useMemo(() => {
- return debounce(sendMessage, DEBOUNCE_TIME);
- }, [sendMessage]);
+ },
+ });
useEffect(() => {
const canvas = canvasRef.current;
@@ -86,16 +38,15 @@ function App() {
const x = event.clientX - canvas.offsetLeft;
const y = event.clientY - canvas.offsetTop;
drawCircle(x, y);
-
+
const imageData = canvas.toDataURL('image/png');
- const req = {
- prompt: 'A moon in a starry night sky',
- seed: Math.floor(Math.random() * 100),
+ sendCurrentData({
+ prompt: PROMPT,
+ seed: 11252023,
image_url: imageData,
sync_mode: true,
strength: 0.5,
- };
- sendCurrentData(JSON.stringify(req));
+ });
};
canvas.addEventListener('mousemove', handleMouseMove);
@@ -103,12 +54,21 @@ function App() {
return () => {
canvas.removeEventListener('mousemove', handleMouseMove);
};
- }, [connect, disconnect, sendCurrentData]);
+ }, []);
return (
-
- {receivedImage &&
}
+
+
+ {receivedImage && (
+
+ )}
+