Category Archives: Javascript

Prompt Engineering (Not)

Hello people! I’m back with a more engineering related post this time! I will explain how I managed to create a ChatGPT app, using a couple of other API’s resulting into this:

Image created by DALL-E
Image created using DALL-E, and the phrase “not sure fry futurama”

https://myopinion.fyi

In this blog post I will attempt to walk you through the entire experience of creating a full stack mini site, using the ChatGPT API from OpenAI, and building a prompt.

My attempt will be holistic, from inception to creation, in any case this happened in the timespan of a whole week. Only the implementation was done in a weekend.

Sleep deprivation

One day I had some issues sleeping, and while staying awake, I decided to play a bit more with ChatGPT. While analysing the way it works, and also highlighting what it can do best, I had a good idea. ChatGPT, can easily summarise a lot of data in a written form. That’s because of the way it is built, the LLM, can “understand” the text input and create vectors that are weighted which in turn changes the output. In plain words, it can be fed some data and asked to create a summary of it, in a good(ish) way.

The other aspect of that idea comes from the fact that I really enjoy eating at good restaurants. And travelling to many different places. Unfortunately, when you reach a place you haven’t visited before, and you are hungry like me, you would want to eat something. So you have two options:

  1. Ask local people, but you might get upsold something you might not like.
  2. Go to google maps restaurants and see what’s around that is good.

Google Maps Restaurant Reviews

Google offers a nice alternative. After we open the map app, we are met with a nice overview which shows all the available restaurants in the area, along with their average overall rating.

If you click the button restaurants, you are getting a list with a lot of restaurants that are in the vicinity, but that list isn’t ordered, not representative of how good the restaurant is. That is because, you cannot sort that list based on how many reviews there are, or which rating they have.

This is something I do not like with Google Maps Restaurant Reviews. I often have to scroll down all the time and search for the ones in the area with the highest number of reviews and rating in order to decide (more on that later why I didn’t implement my app that way — which will come at some time).

Clicking through one restaurant and you get the below section:

You get the rating (4.6 / 5) , the total number of reviews and the type of restaurant (here Fusion)

It includes the rating, the number of reviews and the type of restaurant.

Sure, but, why ChatGPT is needed here?

I’m glad you asked. If you click below, at the “reviews” , you are met with a breakdown of “the most relevant” according to google, reviews for that restaurant.

In that view, among other info, you see the actual user review, with some photos and his or hers total rating (ie. 5/5 in this case).

You guessed it right!

The My Opinion app is getting 5 of the “most relevant” reviews, along with the average rating and my own flavour of personal review prompt and calls the chat gpt api.

The prompt goes like this:

Restaurant: 'hoocut' near Platia Agias Irinis 9, Athina, Overall Rating: 4.3/5 from 2827 Reviews, types: restaurant,food,point_of_interest,establishment

Juliana M, Rating: 5/5, Visited: 10 months ago
Experience: For Greece’s version of “fast food” this was high quality and tasty. Only place I found a vegetarian gyro — had grape leaves inside. It was delicious. Also had the souvlaki over fries which was amazing. Able to sit in or dine out! Quick service. Wish we had an opportunity to go again. Open late!

Jeremy Saal, Rating: 5/5, Visited: a year ago
Experience: These were the best gyros we ever had. In fact, we dined there twice since the food was so good. This place was recommended to us by a local chef, who mentioned their pitas are made the traditional way, rather than mass-produced. The quality of the food and flavor were superb. Next time we're in Athens, this will be our first dining spot.

Allan Venegas, Rating: 5/5, Visited: 6 months ago
Experience: We came here during a food and wine tour we had booked and now I know why. This gyro is the best we have ever had anywhere. They show how these pitas are baked - fluffy yet crispy - packed with different meats. We only came here for a quick bite, but we definitely are going back before we leave Athens again. Even Gordon Ramsey came here in the past! Highly recommend

Sila A., Rating: 5/5, Visited: a year ago
Experience: Delicious gyros with quality ingredients. We tried the chicken pita and pork special, both were very tasty. The pitas are a bit small, consider ordering 2 per person if you are hungry.

Vlad M., Rating: 4/5, Visited: 7 months ago
Experience: Pita and sauce on the pita is nice.different.
The fries and salad is okay. But the cheese is not fluffy enough.
Overall it is very cheap!


Based on the above most relevant comments and overall data, write a small paragraph stating the reasons if and why you want to visit that restaurant.
You are an abrasive software engineer named Takis and you do not like to spend time or money in mediocre restaurants, and you value VFM above all.
Large portions get an extra credit, expensive prices are not. Recent reviews count more.
Write in a software engineering style making jokes and puns, while also referencing the reviewers.

Some example code

In order to build the above, which was the easy part (devops here, not front end dev), I used node js, express and the direct library from OpenAI. I tried other implementations, like Chatgpt API, but at the time I wrote this app, I opted from ES6 and not Typescript (again devops here), which didn’t actually work for me.

 try {
    logger.info('ENABLECHATGPT', process.env.ENABLE_CHATGPT)
    let prompt = `Restaurant: '${data.name}' near ${data.vicinity}, Overall Rating: ${data.rating} from ${data.totalReviews} Reviews, types: ${data.type}\n`
    data.comments.map(comment => {
      prompt += `\n${comment.author_name}, Rating: ${comment.rating}/5, Visited: ${comment.relative_time_description} \nExperience: ${comment.text}\n`
    });
    prompt += `\n\n${template}`
    logger.info('prompt', prompt)
    let completion = { data: { usage: { prompt_tokens: 498, completion_tokens: 116, total_tokens: 614 }, choices: [{ text: "\n\nDefault Text!" }] } }
    if (process.env.ENABLE_CHATGPT == 'true') {
      logger.info('Sending to ChatGPT')
      completion = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: prompt,
        max_tokens: 1000,
        temperature: 0.6,
        top_p: 1,
        n: 1,
        stream: false,
        logprobs: null,
        stop: null
      });
    }
    return completion.data.choices[0].text
  } catch (e) {
    logger.error(e)
    return "Mr. Takis is experiencing some electric intestinal problems right now and he's stuck at the electrical discharge seat..."
  }

Implementation

I chose all JS for this. For various reasons. One reason is that I already had a server with node js installed. Another is that I had worked on a previous project using node js and I had a template ready (and I do not develop stuff that often any more since I’ve officially become a devops for a long time now). And lastly because I’m certain people use JS more often than they are admitting.

I’ll update how I did the implementation soon, in the meantime, have a look at the app and give me a shout if you like it. I’ll just stop here with the following:

ChatGPT is good at “helping” write SIMPLE code.

That is because, I hadn’t worked with ReactJS before that extensively, let alone use some modules I haven’t seen before. So, I did the obvious thing, and asked ChatGPT to write me an “google maps autocomplete react js app widget”.

The above didn’t work out so well. Since the trained model for gpt when I was asking it was from 2020, that’s ages in the js, let alone react world. Therefore, it was hallucinating. And here’s when the frustration starts to kick in… The prompt I gave it to start was the following:

create a sample react app with a form and autocomplete from googles places api only for restaurants

And the response was this:

npx create-react-app restaurant-finder
cd restaurant-finder
npm install @google/maps react-google-autocomplete

And the code:

import React from 'react';
import { GoogleMap, LoadScript, Autocomplete } from '@react-google-maps/api';

const RestaurantFinder = () => {
  const onLoad = (autocomplete) => {
    console.log('autocomplete: ', autocomplete);
  };

  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap center={{ lat: 37.7749, lng: -122.4194 }} zoom={12}>
        <Autocomplete
          onLoad={onLoad}
          onPlaceChanged={() => {
            console.log('place changed');
          }}
          options={{
            types: ['establishment'],
            componentRestrictions: { country: 'us' },
          }}
        />
      </GoogleMap>
    </LoadScript>
  );
};

export default RestaurantFinder;

For the App.js:

import React from 'react';
import RestaurantFinder from './RestaurantFinder';

function App() {
  return (
    <div className="App">
      <RestaurantFinder />
    </div>
  );
}

export default App;

and here’s where things start to get weird. GPT searched for google maps, autocomplete and react and it autogenerated something that didn’t quite help. A simple autocomplete form which was conflicting locally with the current react installation.

After a lot of trial and error, and frustrated error messages, I tried the following:

create a sample react app using googlemaps/react-wrapper and not google-maps-react, with a form and autocomplete from googles places api only for restaurants.

That is when GPT went fully hallucinating. It created a react app, that was using the googlemaps/react-wrapper but only by approximation, as it was trying to extend the google-maps-react functionality. Obviously this did not work at all. The previous attempts, weren’t working either, as the react app had moved ahead a lot, but, even if you do try to “guess” the correct combo of packages it was referring to, again, for me it did not work.

Monero Mining Ban or How to Ban yourself from Google

I’m back

I haven’t posted in a while. Mainly because I was really busy with my morning job, and a lot of other stuff in the between. For all of you who actually kept in line with my blog I would have to say I have done a lot the past 3 years, career-wise.

This post is going to be mainly for talking about Crypto Currency mining, and the related technology.

Fintech

I have worked a lot in the Finance Tech Sector, even before it was the hot word. Unfortunately I didn’t have enough time to actually delve into the Crypto Finance part, only up until recently.

I decided I should have a look at the technological / mining part of a Crypto Currency.

Of course since I am primarily an engineer and not a coder, I decided that the mining must be done in a distributed way and not in a dedicated way most people without any specific technical background do… And that was the issue unfortunately.

Monero JS Mining

 

Even though my current morning job doesn’t include a lot of JavaScript (or ECMAScript as they renamed it nowadays), I still have some juice left in me. So since JS rules the world language-wise, the logical approach would be a JS miner. There is only one js-miner.  And also a nicely laid-out service is  Coin-Hive (I’m not linking the site as it will be marked as a malware, more on that later). The crypto currency is Monero (XMR), and it is mainly developed for mining using a CPU and not any specific ASIC just as Bitcoin or Ethereum are. Which also makes it more profitable in my opinion to mine right now, without actually having a monster like computer, which is needed to mine all the other currencies…

Profitablility

Ok, lets face it mining using others pc’s is not that profitable.
Having something like 30-40 visits per day on your website with an average stay of 1-2 mins could probably give out something like 10 cents per day, with roughly 1M hashes.

So it turns out that a lot of people had the same idea as me (a few months back) by using the browser’s V8 to run mining software.

Unfortunately users do not appreciate this. They do not appreciate ads, but also not their CPU spiking up a bit as they like to browse a site they might benefit from.

Frankly, I find this offensive. Especially from google’s part since I managed to set up a distributed miner. I distributed it’s source code (based on a flavour of CryptoNight algorithm) and mining software between some of my sites, using my github account to host the files for the miner, and a few other freeware sites for proxying the traffic for the mining pool.

The Monero Mining Ban

My github account was banned. Also my sites as well. Google thought that all my sites have been hacked and that they were infected with a malware.

Google sent me a lot of e-mails that my sites were infected, and that I should clean them. Apparently it is illegal to serve these assets even if you specifically ask permission from the users (or just simply notify them for this). So, users don’t like ads, since they are using an adblocker, and they don’t like also using their CPU for mining. OK, I get it. We just have to pay for domains and servers for ourselves, for the code and the brain power we burnt to create the content, and just give this away for nothing. Nice. Even though if I somehow have a guy who still owes me a lot of money for a website I helped him create and I don’t want to put him out of business by just closing it down.

Should you need any more info let me know to help you if you want to setup your own JS mining rig.

PS. I have started working on another big open source project which is really nice, you will hear from me again.

One Liners and Overengineering

Sometimes being a developer is hard work

And that is because you have to study and understand the code other people write. Now, this has many aspects in terms of understanding. There are many people who write code. Some of them are good at it, some are not. It all comes down to two categories in my opinion.

“I’m bored of this thing” people

These people  write code just enough to finish the feature. Not very descriptive code, just enough to get the job done, nothing more. Their variables are often misunderstood, they do not have the proper names or sometimes they have a twofold meaning. Something like:


$thisVariableMightContainAStringOrATraitedSuperObject

Their code structure nonetheless is pretty much the same like :


function addOrSubtract ($addOrSubtract, $firstOperand, $secondOperand)
{

if ($addOrSubtract == '+') {

  return $firstOperand + $secondOperand;

else {

  return $firstOperand - $secondOperand;

}

Their tests also are somehow like the above example. They tend to irrationally use the same structure, using the “feature” of loosely typed languages.

One Liners

Now these people I love. They are trying to do the same thing with the above people, only, they delve into it. They are bored also at first, but when they see that their code can be optimized, they are “one-lining-em”. They do not use the wrongly inferred type as the above people, and their code is “a mystery” yet “it gets the thing done” in one line. Supreme elegance in my opinion.

example :


[].forEach.call($$("*"),function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

Now these One Liners are writing the best optimized code.

The above line was taken from this guy’s blog who explains the exact function of what it does. It is amazing how much you can learn by just one line of code.

What it does is to apply a single pixel outline to all the elements of a page, randomized with a different color. Simply paste the above line in your browser’s console and see what happens. The purpose of this line is to debug your css layout in the page.

If you have a look at the above page you will see that this line is taken from a simple gist and there are a lot of people who are suggesting revisions on how to write that single line.

I will conclude by saying that programming

is something that is quite complex at times. People who do it for a long period, tend to do the above things in order to “escape” the routine of writing plain code. Over-engineering and trying different things (in all the acceptable frameworks of programming, like optimization, maintainability, debug free code) is something that is being constantly done, to keep oneself from doing something different even if one does not have the capability of doing so.

What I mean is that, after you have seen all the technologies, you have used all the “regular path” ways of a construct, you are always trying to do something in a different – peculiar way so as to “escape” the straight-forward, more “boring”, more “effort consuming” way.

And believe me, I have seen this from many, many people that are indeed very good engineers.

After all, Lazy people make the best inventors…

Doing a thing as simple as touching one's left ear, could prove quite complex...
Doing a thing as simple as touching one’s left ear, could prove quite complex…