:IF: Autonomi Browser Suite - Unleash Autonomi

Yeah I was hoping that perhaps the Autonomi foundation might eventually take it and deploy/maintain it if audits are passed etc. Right now I’m just a one person team so for maintenance etc it would be good to be made official eventually. I’m also happy to change it back to SafeBox depending on what the foundation thinks.

1 Like

not super trivial … since you don’t know the fees and used gas until you really execute the upload …

but I guess you can add a safety margin which would result in some small earning for the operator of the remote server which could incentivize people to run those server …

1 Like

So now we have:

  • search engine metadata collection
  • fee collection

Ideally people just use a local client, which will eventually also allow them to run local nodes so they can earn just by running the software to be able to pay for uploads. We plan this in jams too.

1 Like

I wonder if there is some ability like metamask uses to estimate on the fee market.

Also I can imagine some endpoint servers might decide to charge for downloading too, where they cache files much like some services do with torrents. So instead of waiting for the torrent to download, if it has been downloaded by someone already then it is already cached and ready to stream/download much faster.

1 Like

I think I’ve observed even same operations to cost different (in the area of 10x variance) amounts of gas… Besides the varying gas price in wei…

I am still struggling to understand all parts of this layer 2 Blockchain thing…

2 Likes

Some commentary on this here for AntTP: AntTP - Serving Autonomi data over HTTP - #145 by Traktion

1 Like

Quick update

Got a remote server working now that wraps anttp with websockets. (created a Dockerfile for easy deployment)

I have it working that I can request files from anywhere and they get retrieved from the network.

Next step is integrating the flow into the extension. (return downloaded file from promise on webpage so it can be used in webapps, have option to open downloaded file in new tab, write ‘ant’ on a new tab to auto download/stream/view an xorname that you type.

Later I will add some features like the ability to cache already requested files on the server, or perhaps to a s3 bucket.

Perhaps it might be good to have the ability to blacklist certain xornames with a blocklist. (liability for storing content would be on the server admin).

List of configurable servers in the extension settings.

Another feature to enable storing all download requests in database for search-ability (search engines)

Remember you can always use the local option if you don’t want to use a server - the remote servers are just intended for normal users/websites that wish to get/stream content from Autonomi without running a client. It’s basically a way to onboard internet users into our ecosystem.

10 Likes

So am I going to have to install docker to use this? Never used it in my life

2 Likes

You will love it

2 Likes

Will the target audience love it?

That is why i bring it up, to say that for general acceptance, too much instal this and that to use it can be an issue. And from what i have heard docker is not something the general person will think is so easy. One click install is what they are used to. Like click this and install the browser add on. adblocker is able to be installed with clicking an advert for it (LOL) or searching browser add on for adblocker and click to install.

I realise initial deployments will not be the general public’s version, but still considering it and keeping it in mind as one considers the development path for installing is wise.

1 Like

I’ll create install instructions so you can avoid docker if you like.

Docker just wraps lots of instructions so you can deploy many little parts together in a sort of container on the server. Useful for management, updates and testing.

So instead of installing all these on your server individually and worrying about maintenance, you could just install the docker file and it starts a container with all this running inside.


# stage 1: build AntTP using rust nightly

FROM rustlang/rust:nightly-alpine as builder

# install required build tools

RUN apk add --no-cache \

git \

musl-dev \

gcc \

protoc \

protobuf-dev \

build-base \

cmake \

pkgconfig

# install rustfmt for nightly toolchain

RUN rustup component add rustfmt

# clone AntTP repo

WORKDIR /build

RUN git clone https://github.com/traktion/AntTP.git anttp

# build AntTP in release mode

WORKDIR /build/anttp

RUN cargo build --release

# stage 2: node + websocket server

FROM node:20-alpine

# copy AntTP binary

COPY --from=builder /build/anttp/target/release/anttp /usr/local/bin/anttp

RUN chmod +x /usr/local/bin/anttp

# set up node app

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 8081

CMD ["sh", "-c", "anttp & npm start"]
1 Like

Only the people running endpoint servers will have to do this stuff btw. The end users just install the browser extension.

5 Likes

quick update

So I have the ability to download files from endpoint servers working now (audio/video/images)

Today I started working on another feature where it will also enable the user to enter autonomi addresses in the address bar and will open those autonomi web pages.

Currently have the html pages coming back and displaying, but inside these html pages are links to relative autonomi files, so I need to also get these and replace the links in the main html.

The benefit to this is not needing to mess around with setting proxy in browsers, so the end users can browse the internet as normal and then when they want to go to an autonomi address they can type ant, tab and then enter the autonomi address they wish to browse.

Search engine functionality for Autonomi content is planned for later too.

Also thinking about creating an npm package for web developers to interact with the extension.

9 Likes

So I got basic html sites working, but complex single page applications have different routing which makes things very complex when pulling down all the linked scripts and files.

For now I am going to remove the ability to browse sites, and stick to singular files (images, videos, pdfs etc etc).

This will let websites on the internet embed and stream content from Autonomi. I’ll be starting on the npm package for this in the coming days.

I’ll be sure to have some example pages such as video viewer, image viewer, audio player, pdf viewer etc.

For browsing websites I think we should focus on an autonomi browser. (perhaps even just having a fork of a browser with anttp & the proxy changes configured by default.

4 Likes

I agree it would be good to have an Autonomi Browser but you can browse websites now with dweb, and if you want to add that feature to your extension you could re-use the code that is in dweb-cli.

4 Likes

I’ll have a look into it, the issue is the extension uses websockets (due to 6mb extension limit per transfer). So the webpage requests a html file from the extension, which forwards that to the autonomi network via anttp, or potentially dweb.

Then the file is passed back down via the extension to the webpage. What I then do is get all links within the html page and send these back again to get those files. Once those files are downloaded I insert their content to where the links were in the page. The links in secondary files might need to be taken care of too - and at this stage it might make sense to just download the entire site.

This works fine for simple websites. But one page applications like angular etc have certain routing that makes things complex.

One example is


62003e683b5a792f425a75c5d7d99d06e80f7047be8de8176b7d295e510b3b4c/blog/705a5fa9b2b2ee9d1ec88f7f6cae45a9e40d4cf8ea202252c9d7e68eb6e17c8b/article/main.4259c7799b6d23e7.js

seems the same content as :

62003e683b5a792f425a75c5d7d99d06e80f7047be8de8176b7d295e510b3b4c/blog/705a5fa9b2b2ee9d1ec88f7f6cae45a9e40d4cf8ea202252c9d7e68eb6e17c8b/article/polyfills.2e7f987c243a34c6.js

But the different files actually exist on the base xorname route. So I added logic to only get the requested scripts form the base level. And this was just one website, so I’d imagine there is even more complex routing in other webapp frameworks.

I also ran into other issues regarding refreshing the page to take affect when the scripts were updated in the main html. Basically extensions aren’t made for browsing, that’s what browsers are for :sweat_smile:

Just to add, IMIM is a SPA (single page app), where all URLs are routed to the app (usually index.html in the root folder).

To support this, on the clear web, you would usually add some URL rewrite rules on the server side. These direct virtual requests to the app location.

As one of the goals of AntTP is to support modern clear web frameworks (e.g. react, angular, etc), it also has support for SPA routing. It does this by defining an app-conf.json in the archive. AntTP then uses this to build rewrite rules, much the same as nginx, apache httpd, etc.

This works well, as you can see in IMIM. However, if there is another proxy layer in between, such as in an extension, then that proxy must also be aware of rewrite rules.

So, simple multiple page apps are easy to substitute URLs with. Complex SPA sites can dynamically handle and route URLs at the client side, which makes them harder to do the same with. However, it means you can get the elegant routing and integrated app feeling that you get with an SPA.

AntTP with serve both SPA and multiple page apps. Putting something in the middle of the client and AntTP will present challenges for the former though.

2 Likes

For now I think it’s wise to just ensure I have the basics work in terms of getting/interacting with files, and potentially remote uploading given the time constraints of the impossible futures program.

I am very interested in contributing to a browser projects though, and after the program if none exists I will see about creating an alpha browser with the proxy & anttp/dweb packaged inside it.

It would be great for that project to be a collaboration team effort :slightly_smiling_face:

3 Likes

So you’re not able to just respond to browser fetch requests?

How do you insert the content into the page later?

I think dweb has code to handle the cases you mention: you can load content using normal links to local paths (same Archive), external paths (via History or Archive address plus path) or direct to the network (using the datamap address or datamap itself).

This relies on static rendering which is available in Svelte, so it’s easy to build complex sites, apps etc just by turning the static rendering on. No need for dweb to do anything clever. I only tried Svelte so far but expect this to be available in all the popular frameworks (I think Vite actually does the hard work in Svelte).

So if you can intercept browser fetch or respond to browser requests things are already available I think.

I should create some showcase sites in Svelte and other frameworks to show this in action! @Traction knows more about this than I do so I may be missing something but so far it just seems to work.

1 Like

Currently just looking through the base html page and doing this:


 if (tag === "script" && mimeType === "text/javascript") {
                        const scriptText = await blob.text();
                        elements.forEach((el) => {
                            const newScript = doc.createElement("script");
                            newScript.textContent = scriptText;
                            newScript.async = false;
                            el.replaceWith(newScript);
                        });
                    } else if (tag === "link" && mimeType === "text/css") {
                        const cssText = await blob.text();
                        const style = doc.createElement("style");
                        style.textContent = cssText;
                        elements.forEach((el) => el.replaceWith(style));
                    } else if (tag === "img" || tag === "source") {
                        const objectUrl = URL.createObjectURL(blob);
                        elements.forEach((el) => {
                            el.setAttribute("src", objectUrl);
                        });
                    } else {
                        console.warn(
                            `Skipping unsupported tag or MIME: ${tag}, ${mimeType}`
                        );
                    }

I’ll push my latest to github in next few days and make a post here about it for people that wish to be early testers. I’ll leave the web browsing logic there for now, but it’s not working yet, just have it where it opens a new tab, pulls down a html page, replaces all links to scripts with the script content and then inserts all that html to the new tab.

Yeah it would be good to test out some statically generated sites.

1 Like