DEV Community: Timothy Huang

How to run Cisco Foundation-Sec-8B on Colab for FREE

Timothy Huang — Fri, 23 Jan 2026 15:38:16 +0000

Cisco Foundation-Sec-8B is an open source LLM model as an expert for security domain. Since the training data is including threat intelligence reports, vulnerability databases, incident response documentation, and security standards. Please find detail from the official huggingface website:

https://huggingface.co/fdtn-ai/Foundation-Sec-8B

We can easily setup an environment on Google Colab to run the example code on hugginface.

First, go to colab and create a new file:

https://colab.research.google.com/#create=true

In the first code cell, please input the codes to setup an environment for the example code:

!pip install torch
!pip install git+https://github.com/huggingface/transformers
!pip install git+https://github.com/huggingface/accelerate
!pip install huggingface_hub

Click the left RUN button of the code cell, then you will see as below:

After the setup finished, your environment is ready. Now we can put the example code to run. Please add an code cell and input the codes (from example part 1):

# Import the required libraries
import torch
from transformers import AutoTokenizer, AutoModelForCausalLM

# Load the model and tokenizer
tokenizer = AutoTokenizer.from_pretrained("fdtn-ai/Foundation-Sec-8B")
model = AutoModelForCausalLM.from_pretrained("fdtn-ai/Foundation-Sec-8B")

Click the left RUN button of the 2nd code cell, then you will see as below: (the download process of LLM model 16GB may need more than 5 minutes)

Finally, we can put another code cell and input the code (from example part 2):

# Example: Matching CWE to CVE IDs
prompt="""CVE-2021-44228 is a remote code execution flaw in Apache Log4j2 via unsafe JNDI lookups (“Log4Shell”). The CWE is CWE-502.

CVE-2017-0144 is a remote code execution vulnerability in Microsoft’s SMBv1 server (“EternalBlue”) due to a buffer overflow. The CWE is CWE-119.

CVE-2014-0160 is an information-disclosure bug in OpenSSL’s heartbeat extension (“Heartbleed”) causing out-of-bounds reads. The CWE is CWE-125.

CVE-2017-5638 is a remote code execution issue in Apache Struts 2’s Jakarta Multipart parser stemming from improper input validation of the Content-Type header. The CWE is CWE-20.

CVE-2019-0708 is a remote code execution vulnerability in Microsoft’s Remote Desktop Services (“BlueKeep”) triggered by a use-after-free. The CWE is CWE-416.

CVE-2015-10011 is a vulnerability about OpenDNS OpenResolve improper log output neutralization. The CWE is"""

# Tokenize the input
inputs = tokenizer(prompt, return_tensors="pt")

# Generate the response
outputs = model.generate(
    inputs["input_ids"],
    max_new_tokens=3,
    do_sample=True,
    temperature=0.1,
    top_p=0.9,
)

# Decode and print the response
response = tokenizer.decode(outputs[0], skip_special_tokens=True)
response = response.replace(prompt, "").strip()
print(response)

Click the left RUN button of the 3rd code cell, then you will see as below: (Since this is the inference process, so we will wait for some time, in my case is 7 minutes), and the result is the same as example code expectation "CWE-117"

If you want to use a GPU to speed up the inference process, you can upgrade Colab and connect to a GPU-enabled machine (which requires payment), which will significantly reduce inference time.

Reference and thanks:

I've tried to use Colab with L4 GPU, the inference process need only 1 second to print out the result as below:

(T4 is free, but vRAM is not enough to load the model, the minimum GPU on Colab is L4 to load this model.)

An easy way to keep iframe with 16:9 aspect ratio without outer div (Pure CSS)

Timothy Huang — Wed, 22 Jun 2022 03:31:40 +0000

Youtube video provides a embedded code to let us embed iframe in our web page. However, we need the youtube video on the page to keep aspect ratio 16:9.

There is an easy way to do this, a pure css code aspect-ratio property as below code:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

We keep the width 100% and height auto, and also keep the aspect ratio with 16:9.

There is an example:

https://codepen.io/timhuang/pen/BaYdMmN

And also check the aspect-ratio property browser compatibility:

https://caniuse.com/mdn-css_properties_aspect-ratio

Most browsers support this property, but some old browsers don't support, we can use old way with an outer div, also check this post:

https://dev.to/jh3y/css-aspect-ratio-2k6o (Thanks Tompkins https://dev.to/jh3y)

Happy coding!!

How to run a flask project on Repl.it? (with a brower preview)

Timothy Huang — Fri, 15 Oct 2021 06:13:39 +0000

Repl.it (https://repl.it/) is a very useful development runtime environment. We can easily run nodejs, php, html, python, ..etc. on repl.it.

But how to run a flask project on repl.it? We can refer to quick start on flask document:

https://flask.palletsprojects.com/en/2.0.x/quickstart/



from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

But when we push "Run" button on the header area on repl.it, the console start to build and run and exit with nothing, sure, we didn't use flask command to start the program.

Switch to Shell, run:



$ export FLASK_APP=main
$ flask run 
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

We can find that it starts to listen port 5000, but we can't read the result content.

So, how to read the content? Just put the line on the bottom of these code:



app.run(host='0.0.0.0')

Then push the "Run" button, the web server listen on 0.0.0.0:5000 and start a new window that the browser preview content comes out. It's really convenient to develop python flask project on repl.it.

The demo project is here:

https://replit.com/@timhuangt/demoflask

Let's play with flask on Repl.it.

A css-selector that a parent with child

Timothy Huang — Wed, 16 Sep 2020 06:07:47 +0000

Sometimes we want to select elements with known child, we can use :has() selector, but no browser support now. (just check can i use :has() - https://caniuse.com/?search=%3Ahas())

However, we can use jQuery to select these elements by :has() like $("div:has(span.red)").

There is an example to show how it works:

https://codepen.io/timhuang/pen/jOqpxbY

$("div:has(span.red)").append("<p>this paragraph was added by jquery</p>");

jQuery is support the :has() pseudo-class just a draft on W3C:

https://drafts.csswg.org/selectors-4/#relational

After the draft turning into specification we can use :has(), maybe css 4.

Check if file modified in n minutes

Timothy Huang — Mon, 07 Sep 2020 04:22:31 +0000

Sometime we want to check if file modified in n minutes and do something with each file, we can easily use some commands.

Use test to check if condition, find with -mmin to check if older than n minutes, and for-do-done loop to enumerate each file in *.txt

Ok, let's put all together,

# check if file modified in 40 mins
for f in *.txt
do
  if ! test `find $f -mmin +40`
  then
    echo $f
  fi
done

for f in *.txt is to enumerate each file with txt extension file, and if ! is for check the false condition with find $f -mmin +40, i.e. $f not older than 40 minutes, also means $f is as new as modified in 40 minutes.

There is a example test code to check:

https://repl.it/@timhuangt/checkIfFileModified

Just create 3 files (with touch command) that modified in now, 30 minutes ago, 60 minutes ago, and with the modified date-time filename with each file. After the for-do-done loop, we can echo the file(s) name modified in 40 minutes.

Reference:

Sum of nature numbers with JavaScript (3 ways)

Timothy Huang — Tue, 14 Jul 2020 16:15:31 +0000

There are many ways to calculate sum of nature numbers. The basic method is for-loop (a simple way):

function sum1(n){
  var sum = 0;
  for(var i=1;i<=n;i++){
    sum += i;
  }
  return sum;
}

Another method is recursion. Since the sum is 1 + 2 + .. + n, we can easily get

sum(n) = n + sum(n-1)
and sum(n-1) = n-1 + sum(n-2) ...
until sum(1) = 1.

This also is a divide-and-conquer method.

function sum2(n){
  if(n==1){
    return 1;
  }else{
    return n + sum2(n-1);
  }
}

The third way is more complex, using map and reduce. With JavaScript, the map function and reduce function are Array methods.

First, we can use map function to create an array as [1, 2, ... n] :

[...Array(n)]
    .map(function(_, index){ 
      return index + 1; 
    })

Second, we can use reduce function to calculate the sum of these numbers:

[...Array(n)]
    .map(function(_, index){ 
      return index + 1; 
    })
    .reduce(function(acc, cur){
      return acc + cur;
    });

Let's play with repl.it:

https://repl.it/@timhuangt/sumOfNatureNumbers

Happy coding!

Get top 50 web traffic sites with Python

Timothy Huang — Tue, 07 Jul 2020 07:46:48 +0000

We can get the top 50 web traffic sties with these two site traffic monitor services:

Alexa: https://www.alexa.com/
SimilarWeb: https://www.similarweb.com/

and the top 50 web traffic sites are:

Alexa: https://www.alexa.com/topsites
SimilarWeb: https://www.similarweb.com/top-websites/

With python requests and BeautifulSoup modules, we can automate list the top 50 web sites from these two monitor services.

First we create a dict that store these two monitor service urls and selectors (for BeautifulSoup select):

webRankSites = {
  "Alexa": {
    "url": "https://www.alexa.com/topsites/",
    "selector": "div.DescriptionCell"
  },
  "SimilarWeb":{
    "url": "https://www.similarweb.com/top-websites/",
    "selector": "td.topRankingGrid-cell.topWebsitesGrid-cellWebsite.showInMobile"
  }
}

How to define the selector? We need to check these two services url content with the site list:

Alexa:

As the developer tools show, the web site is in the element div with class DescriptionCell, the selector is "div.DescriptionCell".
SimilarWeb:

The web site is in the element td with 3 classes topRankingGrid-cell, topWebsitesGrid-cellWebsite, showInMobile. The selector is "td.topRankingGrid-cell.topWebsitesGrid-cellWebsite.showInMobile".

Second we start to get the url content with requests.get and with BeautifulSoup selector patterns to get the web site list (myheaders is used for similarWeb service, since no user-agent will result response status code 403):


myheaders = {"user-agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0(HTTP_USER_AGENT)"}

for site in webRankSites:
  print("site: " + site)
  resp = requests.get(webRankSites[site]["url"], headers = myheaders)
  soup = BeautifulSoup(resp.text, 'html.parser')
  items = soup.select(webRankSites[site]["selector"])
  i = 1
  for item in items:
    print(str(i) + ". " + item.text.strip())
    i+=1

Then we can get the result:

site: Alexa
1. Google.com
2. Youtube.com
3. Tmall.com
...
site: SimilarWeb
1. google.com
2. youtube.com
3. facebook.com
...

Wow, the result can be automate to get and it looks great. Wanna try? Check this demo:

https://repl.it/@timhuangt/GlobalTopSite

And enjoy it! Happy coding!!

List comprehension in Python

Timothy Huang — Sat, 04 Jul 2020 08:30:26 +0000

Sometimes we need a list with a serial integers, we can use the list comprehension syntax to generate a list with a serial integers like:

a = [ x for x in range(0,100) ]
# a = [0, 1, 2, ... 99]

If we need a list with some condition, like even numbers. We can also use the list comprehension syntax to generate a list with even numbers, like:

a = [ x for x in range(0, 100) if x % 2 == 0]
# a = [0, 2, 4, ... 98]

Another case we need a list with tuple like 2-dimension coordinate:

a = [ (x, y) for x in range(1, 6) for y in range(3, 6) ]
# a = [ (1, 3), (1, 4), (1, 5), (2, 3), (2, 4) ... ] 
## total 5 * 3 items

But if we need the value pairs with both index with x, y move simultaneously, we can use zip:

a = [ x for x in zip(range(1, 6), range(3, 6)) ]
# a = [(1, 3), (2, 4), (3, 5)]
## total 3 items, because the range(3, 6)

The same usage with list comprehension, set and dictionary also has their comprehension.

set comprehension:

s = { v for v in 'ABCDE' }
# s = {'D', 'C', 'A', 'B', 'E'}

with some condition:

s = { v for v in 'ABCDE' if v not in 'BC' }
# {'D', 'E', 'A'}

dictionary comprehension:

s = {key: val for key, val in enumerate('ABCDEF')}
# s = {0: 'A', 1: 'B', 2: 'C', 3: 'D', 4: 'E', 5: 'F'}

with some condition:

s = {key: val for key, val in enumerate('ABCDEF') if val not in 'CD'}
# s = {0: 'A', 1: 'B', 4: 'E', 5: 'F'}

with some condition (more complex):

s = {key: val for key, val in enumerate('ABCDEF') if (val not in 'CD') & (key != 0)}
# s = {1: 'B', 4: 'E', 5: 'F'}

After these example, we can understand the list comprehension to generate list and other types of data.

It's simple but important!

Happy coding!

Reference: https://en.wikipedia.org/wiki/List_comprehension

A simple way to detect if browser is on a mobile device with Javascript

Timothy Huang — Tue, 30 Jun 2020 03:45:10 +0000

Sometimes we need a little Javascript code snippet to detect if user use mobile device, the simplest way is detecting its browser user agent.

We use the regular expression test to detect if browser is a mobile device like:

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  // true for mobile device
  document.write("mobile device");
}else{
  // false for not mobile device
  document.write("not mobile device");
}

demo is on codepen:

https://codepen.io/timhuang/pen/MWKEZMJ

Reference:

https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device

dev is really a good place for share dev knowledge

Timothy Huang — Thu, 11 Jun 2020 06:02:47 +0000

hello there,

this is the very first post on my dev.to/timhuang place. thanks you for providing such a good place to share dev knowledge.