Javascript client support #107

operand · 2023-08-10T02:59:54Z

operand
Aug 10, 2023
Maintainer

If you look at the React example index.html, there's the beginnings of a simple JS client that could be used to define Javascript based agents that can integrate with the python-based Space's.

I'd really like to see this developed but for now it's just an idea. If you'd like to see this developed, please upvote or let me know!

wwj718 · 2023-08-10T05:57:25Z

wwj718
Aug 10, 2023

I want javascript Space and Agent !

Space based on MQTT(MQTT over websocket) protocol may be a good option.

I mentioned this idea in this issue before:

Since web mqtt is available out of the box in RabbitMQ, we can use many web environments as the environment where the Agent lives. The following is an example: http://storage.codelab.club/agency-mqtt-snap.mp4

This video shows the Agent built in javascript, I reproduced all the functions of OpenAIFunctionAgent.

MQTT.js is a great js-library and The RabbitMQ AMQP protocol is already very well compatible with MQTT.

The benefits of this approach may be the following two points:

We no longer need to maintain a proxy Agent, nor do we need to deal with issues such as reconnection or Quality of Service
Most of the work in this direction can be directly used in the IoT Agent(Both are based on MQTT)

7 replies

operand Aug 11, 2023
Maintainer Author

Yes. 100%

wwj718 Aug 11, 2023

I wrote a minimal example to show how to subscribe to all agency messages in Javascript, the function is similar to https://github.com/operand/agency/blob/main/scripts/receive_logs_topic.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript client</title>
    <!--https://github.com/mqttjs/MQTT.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/5.0.1/mqtt.min.js"></script>
    
</head>
<body>

<script>
const url = 'ws://127.0.0.1:15675/ws'
const options = {
  	  username: "guest",
      password: "guest"
    }
const client = mqtt.connect(url, options)

client.on("connect", () => {
  client.subscribe("#")
});

client.on("message", (topic, message) => {
  // message is Buffer
  console.log(message.toString());
  // client.publish("test", "Hello mqtt");
});
</script>
    
</body>
</html>

Once these programs are running, and then open the above html page, we can see all the messages flowing in the browser.

JavaScript lacks some structures of Python, such as decorators. It is not easy to translate directly. It seems that the adjustment of the basic class structure is required. It may be better if you build the original structure.

wwj718 Aug 11, 2023

claude or ChatGPT may be able to help with some translation work, the following is an example that I asked claude to help translate agent.py.

Here is the Python code translated to JavaScript ES6:

import { parse } from 'docstring-parser';

// Access keys 
const ACCESS_PERMITTED = "permitted";
const ACCESS_DENIED = "denied";
const ACCESS_REQUESTED = "requested";

function __generateHelp(method) {
  const signature = method; // TODO: implement signature inspection
  const parsedDocstring = parse(method.__doc__); 
  
  const helpObject = {};
  
  // Description
  if(parsedDocstring.shortDescription) {
    let description = parsedDocstring.shortDescription;
    if(parsedDocstring.longDescription) {
      description += " " + parsedDocstring.longDescription;
    }
    helpObject.description = description.replace(/\s+/g, " ").trim();
  }
  
  // Args
  helpObject.args = {};
  const docstringArgs = parsedDocstring.params.reduce((obj, param) => {
    obj[param.argName] = param;
    return obj;
  }, {});
  const argNames = []; // TODO: get arg names from signature
  for(const argName of argNames) {
    const argObject = {};
    
    // Type
    if(signature.params[argName].annotation) {
      argObject.type = signature.params[argName].annotation.__name__; 
    } else if(docstringArgs[argName]?.typeName) {
      argObject.type = docstringArgs[argName].typeName;
    }
    
    // Description
    if(docstringArgs[argName]?.description) {
      argObject.description = docstringArgs[argName].description.trim();
    }
    
    helpObject.args[argName] = argObject;
  }
  
  // Returns
  if(parsedDocstring.returns) {
    helpObject.returns = {};
    
    // Type
    if(signature.returnAnnotation) {
      helpObject.returns.type = signature.returnAnnotation.__name__;
    } else if(parsedDocstring.returns.typeName) {
      helpObject.returns.type = parsedDocstring.returns.typeName;
    }
  
    // Description
    if(parsedDocstring.returns.description) {
      helpObject.returns.description = parsedDocstring.returns.description.trim();
    }
  }
  
  return helpObject;
}

function action(target, name, descriptor) {
  // Decorator logic
  target.actionProperties = {
    name: name, 
    accessPolicy: ACCESS_PERMITTED,
    help: __generateHelp(target)
  };
  
  return target;
}

class Agent {

  constructor(id, receiveOwnBroadcasts=true) {
    // Input validation
    
    this.id = id;
    this.receiveOwnBroadcasts = receiveOwnBroadcasts; 
    this.space = null; // Set by Space
    this.messageLog = [];
  }

  send(message) {
    // Send message
    message.from = this.id;
    this.messageLog.push(message);
    this.space._route(message); 
  }

  _receive(message) {
    // Receive message
    
    if(!this.receiveOwnBroadcasts 
       && message.from === this.id
       && message.to === '*') {
      return; 
    }
    
    try {
      // Record and commit action
      this.messageLog.push(message);
      this.__commit(message);  
    } catch(e) {
      // Handle exceptions
      this.send({
        to: message.from,
        from: this.id,
        action: {
          name: "error",
          args: {
            error: e.toString(),
            originalMessageId: message.id  
          }
        }
      });
    }
  }
  
  __commit(message) {
    // Commit action
    
    // Get action method
    let actionMethod;
    try {
      actionMethod = this.__actionMethod(message.action.name);
    } catch(e) {
      // Handle missing method
      if(message.to === this.id) {
        throw new Error(`${message.action.name} not found on ${this.id}`);
      } else {
        return; // Ignore broadcast
      }
    }
    
    this.beforeAction(message);
    
    let returnValue;
    let error;
    try {
      // Check permission
      if(this.__permitted(message)) {
      
        // Invoke action method
        this._currentMessage = message;
        returnValue = actionMethod(message.action.args);
        this._currentMessage = null;
        
        // Return value
        if(returnValue !== undefined) {
          this.send({
            to: message.from, 
            action: {
              name: "response",
              args: {
                data: returnValue,
                originalMessageId: message.id
              }
            }
          });
        }
        
      } else {
        throw new Error(`${this.id}.${message.action.name} not permitted`);
      }
    } catch(e) {
      error = e;
      throw e; 
    } finally {
      this.afterAction(message, returnValue, error);
    }
  }
  
  __permitted(message) {
    // Check permission
    const actionMethod = this.__actionMethod(message.action.name);
    const policy = actionMethod.actionProperties.accessPolicy;
    
    if(policy === ACCESS_PERMITTED) {
      return true;
    } else if (policy === ACCESS_DENIED) {
      return false;
    } else if (policy === ACCESS_REQUESTED) {
      return this.requestPermission(message); 
    } else {
      throw new Error(`Invalid policy ${message.action.name}: ${policy}`);
    }
  }

  __actionMethods() {
    // Get action methods
    const methods = Object.getOwnPropertyNames(Object.getPrototypeOf(this))
      .filter(key => typeof this[key] === "function")
      .reduce((obj, key) => {
        obj[key] = this[key];
        return obj;
      }, {});
    
    return Object.keys(methods)
      .filter(key => methods[key].actionProperties)
      .reduce((obj, key) => {
        obj[key] = methods[key];
        return obj;  
      }, {});
  }

  __actionMethod(name) {
    return this.__actionMethods()[name]; 
  }

  @action
  help(actionName) {
    // Implement help method
  }

  @action
  response(data, originalMessageId) {
    // Implement response method 
  }

  @action 
  error(error, originalMessageId) {
    // Implement error method
  }

  afterAdd() {
    // After add to space
  }

  beforeRemove() {
    // Before remove from space
  }

  beforeAction(message) {
    // Before action
  }
  
  afterAction(originalMessage, returnValue, error) {
    // After action
  }
  
  requestPermission(proposedMessage) {
    // Implement request permission
  }

}

The main differences from Python are:

Using JS class syntax, import, and decorators
Accessing properties directly instead of via getter/setter methods
Handling method signatures and inspection differently
Converting error handling to use Promise rejections
Adding type annotations like @action instead of reflection

Let me know if any part needs more explanation!

wwj718 Aug 11, 2023

https://chat.openai.com/share/f1736dfb-f0b6-4f27-95ef-a6fbfbc63840 This is the translation result of chatgpt (incomplete)

operand Aug 11, 2023
Maintainer Author

I like it. I think this is definitely a direction I'd like to go. I'll be able to maintain the JS client along with python but I don't know that I'll have the bandwidth to start this soon. At this point I'm wondering a few things:

When to prioritize this - I plan to keep pushing for the multimedia and multiprocessing features first.
Where should this be maintained? I'm thinking at first it could be developed under the examples directory, and when it stabilizes it might need to become its own codebase and project.
How to minimize maintenance - I don't think we can rely on an LLM to perform a stable translation every time. It would be ideal if a JS client could be transpiled from python. I haven't looked into tools for that yet, if there are any.

Just brainstorming a bit here. I think this will in some way definitely be on the roadmap. It creates many great possibilities. And we can use whatever we learn here to potentially support other languages like C, which I think would be another great language to build a client for.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Javascript client support #107

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 7 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Javascript client support #107

operand Aug 10, 2023 Maintainer

Replies: 1 comment · 7 replies

wwj718 Aug 10, 2023

operand Aug 11, 2023 Maintainer Author

wwj718 Aug 11, 2023

wwj718 Aug 11, 2023

wwj718 Aug 11, 2023

operand Aug 11, 2023 Maintainer Author

operand
Aug 10, 2023
Maintainer

Replies: 1 comment 7 replies

wwj718
Aug 10, 2023

operand Aug 11, 2023
Maintainer Author

operand Aug 11, 2023
Maintainer Author