Cactbot: FFXIV JavaScript Raiding Overlay

Cactbot (ffxiv raiding overlay)

About

cactbot is an ACT overlay that provides raiding tools for Final Fantasy XIV. This project is an overlay plugin for OverlayPlugin which itself is a plugin for Advanced Combat Tracker.

cactbot provides these modules:

• raidboss: built-in timelines and triggers:

• oopsyraidsy: mistake and death reporting

• jobs: condensed gauges with buff and proc tracking

• eureka: Eureka NM tracking map

• fisher: Fishing cast time tracking

• radar: hunt mob directions, puller notifications

• dps: extra features for dps meters

Installing

Dependencies

Install .NET Framework version 4.6.1 or above.

You must have DirectX 11 enabled for Final Fantasy XIV.

Install the 64-bit version of Advanced Combat Tracker, if you have not already.

Install FFXIV ACT Plugin

If you have just installed ACT, then you will be presented with a startup wizard. To get to the startup wizard otherwise, click on Options and then click on Show Startup Wizard.

In the startup wizard, select FFXIV Parsing Plugin and then click the Download/Enable Plugin button. This will download %APPDATA%\Advanced Combat Tracker\Plugins\FFXIV_ACT_Plugin.dll and enable it in the list of plugins.

Alternative FFXIV Plugin Guides:

• fflogs video guide
• TomRichter guide

Install OverlayPlugin

At this point, if you select the Plugins tab and go to the Plugin Listing, your list of plugins should look something like this:

Click on Get Plugins to open up the ACT plugin installer.

Select Overlay Plugin and then click Download and Enable.

This will download OverlayPlugin into %APPDATA%\Advanced Combat Tracker\Plugins\OverlayPlugin and enable OverlayPlugin.dll in the list of plugins.

As a note, you must use the most current fork of OverlayPlugin and not the original RainbowMage version or the hibiyasleep fork or the ngld fork.

Installing cactbot

Again, go to the Plugins tab and go to the Plugin Listing, and then select Get Plugins.

Select Cactbot and then click Download and Enable.

This will download the cactbot into %APPDATA%\Advanced Combat Tracker\Plugins\cactbot-version\cactbot and enable CactbotOverlay.dll in the list of plugins.

Note: Due to a difference in how ACT expects archives to be and how cactbot generates its zip files, there will be something like a cactbot-0.15.2 folder that corresponds to the initial version that you downloaded cactbot. This folder name does not matter and is cosmetic.

Plugin Load Order

Because of cactbot’s dependencies, cactbot must be loaded after both OverlayPlugin and the FFXIV ACT plugin. Verify that your plugins are in this order:

• FFIXV_ACT_Plugin.dll
• OverlayPlugin.dll
• CactbotOverlay.dll

Finally, restart ACT.

Adding overlay modules

Here's an example of how to set up the raidboss overlay module. Setting up other cactbot overlays works identically.

Open ACT.

Make sure you've restarted ACT after adding the cactbot plugin.

Navigate to the Plugins tab of ACT and then the OverlayPlugin.dll tab inside it.

Click the "New" button and then pick Cactbot Raidboss in the Preset list.

At this point, you should see some test UI appear on screen. cactbot provides default test UI, a large dashed red border, and a blue background to help with resizing and placing overlays on screen. These all go away when the overlay is locked in the config panel for the overlay. You should always lock your overlay once you are done resizing and placing it.

Type in any name you'd like as the name of this overlay, e.g. raidbossy.

Click the OK button to add this as an Overlay. It will now appear in the list of overlays in the Plugins -> OverlayPlugin.dll tab.

Drag and resize the overlay to the location that you want it in.

In the General tab of the Raidboss overlay, click the Lock Overlay and Enable Clickthrough checkboxes. The test bars, debug text, dashed red border, and shaded blue background will disappear once the overlay has been locked.

If you want to test the raidboss plugin, teleport to Summerford Farms, and do a /countdown 5.

Adding other cactbot overlays is a similar process. Follow the same process but select a different cactbot preset.

Building from source

Follow all the steps above for installing cactbot first. To install dependencies there are 2 methods: per script and manually

Dependencies: Script Method

1. curl MUST be installed (this is used to download dependencies)
2. Execute ts-node ./util/fetch_deps.ts script
3. Continue with Steps to build

Dependencies: Manual Method

1. Please download the latest Zip file from https://github.com/EQAditu/AdvancedCombatTracker/releases/
2. Extract the Advanced Combat Tracker.exe to cactbot/plugin/ThirdParty/ACT/
3. Please download the latest SDK Zip file from https://github.com/ravahn/FFXIV_ACT_Plugin/ (make sure the file says SDK in its name)
4. Extract the SDK folder as well as the FFXIV_ACT_Plugin.dll to cactbot/plugin/ThirdParty/FFXIV_ACT/
5. Please download the latest Zip file from https://github.com/OverlayPlugin/OverlayPlugin/releases/
6. Extract the libs folder as well as the OverlayPlugin.dll to cactbot/plugin/ThirdParty/OverlayPlugin/
7. Continue with Steps to build

The folder should look something like this (keep in mind files can change with updates in the future):

ThirdParty
|- ACT
|  |- Advanced Combat Tracker.exe
|- FFXIV_ACT
|  |- SDK
|  |  |- FFXIV_ACT_Plugin.Common.dll
|  |  |- FFXIV_ACT_Plugin.Config.dll
|  |  |- FFXIV_ACT_Plugin.LogFile.dll
|  |  |- FFXIV_ACT_Plugin.Memory.dll
|  |  |- FFXIV_ACT_Plugin.Network.dll
|  |  |- FFXIV_ACT_Plugin.Overlay.dll
|  |  |- FFXIV_ACT_Plugin.Parse.dll
|  |  |- FFXIV_ACT_Plugin.Resource.dll
|  |- FFXIV_ACT_Plugin.dll
|- OverlayPlugin
   |- libs
   |  |- HtmlRenderer.dll
   |  |- Markdig.Signed.dll
   |  |- Newtonsoft.Json.dll
   |  |- OverlayPlugin.Common.dll
   |  |- OverlayPlugin.Core.dll
   |  |- OverlayPlugin.Updater.dll
   |  |- SharpCompress.dll
   |  |- System.ValueTuple.dll
   |  |- websocket-sharp.dll
   |- OverlayPlugin.dll

Steps to build plugin

1. Open the solution in Visual Studio (tested with Visual Studio 2017).
2. Build for "Release" and "x64".
3. The plugin will be built as bin/x64/Release/CactbotOverlay.dll.
4. Add the built plugin directly as an ACT plugin. In the ACT -> Plugins -> Plugin Listing tab, click the Browse button and find the bin/x64/Release/CactbotOverlay.dll where this file was built. Then click Add/Enable Plugin.

npm and webpack

If you are not a cactbot developer and are trying to modify cactbot for your own personal triggers, you should instead refer to the customization documentation instead of changing your local cactbot files.

To install npm and start Webpack, follow these steps:

1. Install nodejs and npm
2. Run npm install in the root of the cactbot directory.
3. Run npm run build or npm start.

See the contributing documentation for more details about using Webpack.

UI module overview

The ui/ directory contains cactbot's ui modules. If you installed cactbot following the instructions above, this will most likely be %APPDATA%\Advanced Combat Tracker\Plugins\cactbot-version\cactbot\ui\.

Each cactbot ui module should be added as a separate overlay. See the Adding Overlay Modules section for more details about setup.

raidboss module

To use this module, point cactbot at ui/raidboss/raidboss.html or use the Cactbot Raidboss preset.

This module provides a visual timeline of upcoming events in a fight, as well as text and audio notifications to help increase raid awareness. Text and sound alerts can be based on the fight timeline, or come from log messages that occur in the game, similar to ACT's "Custom Triggers". The module is designed to look and feel similar to the BigWigs Bossmods addon for World of Warcraft.

This page lists the currently supported set of content in cactbot. Support is continually added over time (patches welcome!) but a lot of old content may not be supported yet.

Fight timelines are provided in files designed for the ACT Timeline plugin, documented here with some extensions.

There are three levels of text alerts, in order of escalating importance: info, alert, and alarm. Text messages will be in one of these, and more important levels are larger and more eye grabbing colors. Text-to-speech can be configured if you prefer that over on screen text.

Timeline files and triggers for text and sound alerts are found in ui/raidboss/data, timeline files with .txt extension and trigger files with .ts extension.

In this screenshot, the raidboss module is highlighted, with the timeline circled in red, and the text alerts circled in yellow, with an alert-level text message visible.

raidboss emulator

If you are writing triggers or timelines and want to test them, you can use the raidboss emulator: ui/raidboss/raidemulator.html.

This currently can only be loaded in a browser and not as an overlay. This will work in current version of Chrome, and should work in other browsers as well but this is less tested.

If you want the emulator to use your ACT settings and user triggers, you will need to enable the OverlayPlugin WS Server via the following instructions:

1. Start ACT.
2. Start the WS Server via Plugins -> OverlayPlugin WSServer -> Stream/Local Overlay.

If you're developing triggers for the cactbot repository, you can start a local development server via npm run start and load the overlay in Chrome via http://127.0.0.1:8080/ui/raidboss/raidemulator.html?OVERLAY_WS=ws://127.0.0.1:10501/ws

If you're developing user triggers, you can load the overlay in Chrome via https://quisquous.github.io/cactbot/ui/raidboss/raidemulator.html?OVERLAY_WS=ws://127.0.0.1:10501/ws

If you're trying to reproduce an issue, you can load the overlay in Chrome via https://quisquous.github.io/cactbot/ui/raidboss/raidemulator.html. You don't need the WS Server running in this case.

Once you've got the overlay loaded, you can follow these instructions to use the emulator.

1. Drag and drop a network log onto the page.
2. Select the zone and encounter, and then click Load Encounter.

If the emulator is not working, check the console log in the inspector for errors.

oopsyraidsy module

To use this module, point cactbot at ui/oopsyraidsy/oopsyraidsy.html or use the Cactbot OopsyRaidsy preset.

This module provides mistake tracking and death reporting. Oopsy raidsy is meant to reduce the time wasted understanding what went wrong on fights and how people died. During the fight, only a limited number of mistakes are shown (to avoid clutter), but afterwards a full scrollable list is displayed.

When somebody dies, the last thing they took damage from is listed in the log. For example, if the log specifies: ":skull: Poutine: Iron Chariot (82173/23703)" this means that Poutine most likely died to Iron Chariot, taking 82173 damage and having 23703 health at the time. The health value itself is not perfect and may be slightly out of date by a ~second due to a hot tick or multiple simultaneous damage sources.

When mistakes are made that are avoidable, oopsy logs warning (:warning:) and failure (:no_entry_sign:) messages, explaining what went wrong.

Mistake triggers are specified for individual fights in the ui/oopsyraidsy/data folder.

You can copy oopsy lines to the clipboard by clicking them. (You may need to uncheck Enable Clickthrough checkbox from the OverlayPlugin option.)

jobs module

To use this module, point cactbot at ui/jobs/jobs.html or use the Cactbot Jobs preset.

This module provides health and mana bars, as well as icons and timer bars for big raid buffs such as The Balance and Trick Attack. It also features a food buff warning to keep up your food buff when leveling or raiding, and a visual pull countdown.

It has more fleshed out support for some jobs but is strongly a Work In Progress for others.

Supported Jobs (Click to expand)

Job	Feature
Paladin	Shows Oath amount, and atonement stacks, DoT remaining time, Fight or Flight duration/cooldown, Expiacion cooldown and shows combo time remaining.
Warrior	Shows Beast amount, Surging Tempest duration, Upheaval and Inner Release cooldown, and shows combo time remaining.
Dark Knight	Shows the blood amount and darkside time, BloodWeapon and Delirium and LivingShadow duration/cooldown, and shows combo time remaining.
Gunbreaker	Shows No Mercy duration/cooldown, Bloodfest and Gnashing Fang cooldown, Cartridge amount, and shows combo time remaining.
White Mage	Shows Heal and Blood Lily amount, time to next Lily, DoTs remaining time, and shows Assize and Lucid Dreaming cooldown.
Scholar	Shows Aetherflow stacks, Fairy gauge amount/time remaining, DoTs remaining time, and shows Aetherflow and Lucid Dreaming cooldown.
Astrologian	Shows Astrosigns amount, notify who or whether to play the current card, DoTs remaining time, and shows Draw and Lucid Dreaming cooldown.
Sage	Shows Addersgall and Addersting stacks, time to next Addersgall, DoTs remaining time, and shows Phlegma and Rhizomata and Lucid Dreaming cooldown.
Monk	Shows chakra count and form time, and tracks monk buffs and debuffs.
Dragoon	Shows blood and eye amount, remaining Disembowel time, jump cooldown, and Lance Charge and Dragon Sight duration/cooldown.
Ninja	Shows Ninki amount, Huton remaining time, Trick Attack duration/cooldown, Bunshin and Mudras cooldown, and shows combo time remaining.
Samurai	Shows Kenki amount, Meditation stacks, Fugetsu and Fuka and Higanbana duration, Tsubame-gaeshi cooldown, and shows combo time remaining.
Reaper	Shows Soul Gauge, Shroud Gauge, Death's Design duration, Soul Slice and Gluttony cooldown, Arcane Circle duration/cooldown, and shows combo time remaining.
Bard	Shows songs playing and remaining time, Repertoire stack, Soul Voice amount, StraightShotReady track, DoT remaining time, and a bar that show when your DoTs will tick.
Machinist	Shows Heat gauge, Battery gauge, combo timer, Drill/Bioblaster and Air Anchor and Chain Saw cooldown, Wild Fire cooldown/duration. When Wild Fire is active, there will be a gauge to show how many GCD you have landed.
Dancer	Shows combo timer, Feather gauge, Esprit gauge, Standard Step cooldown, Technical Step and Flourish cooldown/duration.
Black Mage	Shows DoTs remaining time, Firestarter and Thundercloud proc duration, time to next xeno, MP ticker, Fire/Ice stack and umbral heart stack.
Summoner	Shows Demi-Summoning time, Aetherflow stack, Attunement stacks, Energy Drain cooldown, Trance cooldown, and Lucid Dreaming cooldown.
Red Mage	Shows white/black mana, tracks procs for Verstone and Verfire, and Fleche and Contre Sixte cooldown.
Blue Mage	Shows cooldown of offguard, lucid dreaming, and Song Of Torment DoT remaining time.

In this screenshot, the jobs module is highlighted for the Red Mage job. The health and mana bars, as well as Red Mage white/black mana tracking is circled in purple, with the large raid buff tracking pointed to beside it in orange. The first step of the melee combo has been executed, which is displayed as the yellow box above the health bar. The proc tracking is circled below in green.

eureka module

To use this module, point cactbot at ui/eureka/eureka.html or use the Cactbot Eureka preset.

This module provides automatic tracking of NMs that are popped or have been killed. It shows gales/night timers and any local tracker link that has been pasted in chat. Any flags in chat are also temporarily included on the map.

It currently does not read the tracker information directly. However, if you click on the left/red "Copy killed NMs" button in the tracker to copy the list of currently dead NMs, you can paste it in game, e.g. /echo NMs on cooldown: Serket (7m) → Julika (24m) → Poly (54m)

If you do not see the emoji, make sure you have installed this Windows update.

radar module

To use this module, point cactbot at ui/radar/radar.html or use the Cactbot Radar preset.

This module lets you know about nearby hunt mobs (S-rank, A-rank, etc). When one pops, it gives you an arrow (based on your character's heading) and a distance to the mob.

There are options to show who pulled the mob, as well as to configure the display of the radar. You can also set up custom options for different ranks (e.g. make noises for S rank, but be silent for B ranks), or set up custom triggers for any mob name you would like.

See the cactbot/user/radar-example.js for more options.

fisher module

To use this module, point cactbot at ui/fisher/fisher.html or use the Cactbot Fisher preset.

When you cast your line at a fishing hole, this module keeps track of when you reel in particular fish so that you know what you might be getting when you hook it.

Cast times are currently only logged as you fish, so there won't be any data until you've caught each fish. Green bars represent light tugs, yellow is a medium tug and red bars are legendary/heavy tugs.

Check here for common troubleshooting tips.

dps meters

cactbot can be used with any dps meter overlay designed for OverlayPlugin's miniparse addon, with the option to build out more features through cactbot's additional Javascript APIs. cactbot also auto-stops fights on wipes, so you can configure ACT's fight time to infinity.

The xephero dps meter is based on the same dps meter built for miniparse, with the additional ability to do per-phase dps tracking, displayed in additional columns. In the screenshot below the phases are named B1, B2, B3. These autogenerate from dungeon bosses, but could be used to differentiate raid fight phases.

The rdmty dps meter is based on the same dps meter for miniparse, and recolored to match fflogs.

pull counter module

This small module sticks the current pull count for raiding bosses on screen. This is primarily for folks who stream a lot and want to review video footage. Having a number on screen makes it easy to scrub through video and find particular pulls to review.

In most cases, you can reset the count for the current boss/zone by typing /echo pullcounter reset. You can also edit the counts directly in your %APPDATA%\Advanced Combat Tracker\Config\RainbowMage.OverlayPlugin.config.json file.

test module

To use this module, point cactbot at ui/test/test.html or use the Cactbot Test preset.

This module is just an onscreen test of cactbot variables and is not meant to be used while playing. It can be useful to try out to make sure everything is working as expected or to use to help debug overlay issues.

Troubleshooting

A general FAQ can be found here containing solutions to common Cactbot issues.

Cactbot Customization

Most common cactbot configuration can be done via the control panel, inside of ACT.

This can be found by going to Plugins -> OverlayPlugin.dll -> Cactbot Event Source, and then clicking on options there.

In particular, if you want to use text to speech for raidboss alerts, you can change the "Default alert output" to be "TTS Only" or "Text and TTS". You can also change this on a per trigger basis.

Or, if for some reason (???) you don't want the ready check sound alert, you can disable this via the same options panel. Go to Raidboss -> General Triggers -> General -> General Ready Check, and set it to Disabled instead of Defaults.

These options are stored in your %APPDATA%\Advanced Combat Tracker\Config\RainbowMage.OverlayPlugin.config.json file. It is not recommended to edit this file directly, as it must be strict json and ACT might fail to load if the file is written incorrectly.

It is recommended that you do most of your configuration via this control panel rather than with user files. Files in cactbot/user/ are more powerful and can override anything from the control panel. However, this can also be confusing when the control panel doesn't adjust something properly that a cactbot/user/ file is overriding silently.

See this documentation for more details about user javascript and css files.

Supported Languages

cactbot is tested and works with the current international (English, German, French, Japanese) version, the current Chinese version, and the current Korean version. Some translations are still a work in progress.

🌎 [English] [简体中文] [한국어]

Download Details:

Author: quisquous
Source Code: https://github.com/quisquous/cactbot 
License: Apache-2.0 license

#javascript #timeline #final #fantasy 

Gradient Descent Algorithm Explained with Example

In this Machine Learning tutorial, you'll learn what the Gradient Descent algorithm is, how it works, its formula, what learning rate is, and the importance of picking the right learning rate. 

What is the Gradient Descent Algorithm?

Gradient descent is probably the most popular machine learning algorithm. At its core, the algorithm exists to minimize errors as much as possible.

The aim of gradient descent as an algorithm is to minimize the cost function of a model. We can tell this from the meanings of the words ‘Gradient’ and ‘Descent’.

While gradient means the gap between two defined points (that is the cost function in this context), descent refers to downward motion in general (that is minimizing the cost function in this context).

So in the context of machine learning, Gradient Descent refers to the iterative attempt to minimize the prediction error of a machine learning model by adjusting its parameters to yield the smallest possible error.

This error is known as the Cost Function. The cost function is a plot of the answer of the question “by how much does the predicted value differ from the actual value?”. While the way to evaluate cost functions often differs for different machine learning models, in a simple linear regression model, it is usually the root mean squared error of the model.

A 3D plot of the cost function of a simple linear regression model with M representing the minimum point

It is important to note that for the simpler models like the linear regression, a plot of the cost function is usually bow-shaped, which makes it easier to ascertain the minimum point. However, this is not always the case. For more complex models (for instance neural networks), the plot might not be bow-shaped. It is possible for the cost function to have multiple minimum points as shown in the image below.

A 3D plot of the cost function of a neural network. Source: Coursera

How Does Gradient Descent Work?

Firstly, it is important to note that like most machine learning processes, the gradient descent algorithm is an iterative process.

Assuming you have the cost function for a simple linear regression model as j(w,b) where j is a function of w and b, the gradient descent algorithm works such that it starts off with some initial random guess for w and b. The algorithm will keep tweaking the parameters w and b in an attempt to optimize the cost function, j.

In linear regression, the choice for the initial values does not matter much. A common choice is zero.

The perfect analogy for the gradient descent algorithm that minimizes the cost-function j(w, b) and reaches its local minimum by adjusting the parameters w and b is hiking down to the bottom of a mountain or hill (as shown in the 3D plot of the cost function of a simple linear regression model shown earlier). Or, trying to get to the lowest point of a golf course. In either case, they will make repetitive short steps till they make it to the bottom of the mountain or hill.

The Gradient Descent Formula

Here's the formula for gradient descent: b = a - γ Δ f(a)

The equation above describes what the gradient descent algorithm does.

That is b is the next position of the hiker while a represents the current position. The minus sign is for the minimization part of the gradient descent algorithm since the goal is to minimize the error as much as possible. γ in the middle is a factor known as the learning rate, and the term Δf(a) is a gradient term that defines the direction of the minimum point.

As such, this formula tells the next position for the hiker/the person on the golf course (that is the direction of the steepest descent). It is important to note that the term γΔ f(a) is subtracted from a because the goal is to move against the gradient, toward the local minimum.

What is the Learning Rate?

The learning rate is the determinant of how big the steps gradient descent takes in the direction of the local minimum. It determines the speed with which the algorithm moves towards the optimum values of the cost function.

Because of this, the choice of the learning rate, γ, is important and has a significant impact on the effectiveness of the algorithm.

If the learning rate is too big as shown above, in a bid to find the optimal point, it moves from the point on the left all the way to the point on the right. In that case, you see that the cost function has gotten worse.  

On the other hand, if the learning rate is too small, then gradient descents will work, albeit very slowly.

It is important to pick the learning rate carefully.

How to Implement Gradient Descent in Linear Regression

import numpy as np
import matplotlib.pyplot as plt

class Linear_Regression:
	def __init__(self, X, Y):
		self.X = X
		self.Y = Y
		self.b = [0, 0]
	
	def update_coeffs(self, learning_rate):
		Y_pred = self.predict()
		Y = self.Y
		m = len(Y)
		self.b[0] = self.b[0] - (learning_rate * ((1/m) * np.sum(Y_pred - Y)))
		self.b[1] = self.b[1] - (learning_rate * ((1/m) * np.sum((Y_pred - Y) * self.X)))
        
	def predict(self, X=[]):
		Y_pred = np.array([])
		if not X: X = self.X
		b = self.b
		for x in X:
			Y_pred = np.append(Y_pred, b[0] + (b[1] * x))

		return Y_pred
	
	def get_current_accuracy(self, Y_pred):
		p, e = Y_pred, self.Y
		n = len(Y_pred)
		return 1-sum(
			[
				abs(p[i]-e[i])/e[i]
				for i in range(n)
				if e[i] != 0]
		)/n
	#def predict(self, b, yi):

	def compute_cost(self, Y_pred):
		m = len(self.Y)
		J = (1 / 2*m) * (np.sum(Y_pred - self.Y)**2)
		return J

	def plot_best_fit(self, Y_pred, fig):
				f = plt.figure(fig)
				plt.scatter(self.X, self.Y, color='b')
				plt.plot(self.X, Y_pred, color='g')
				f.show()


def main():
	X = np.array([i for i in range(11)])
	Y = np.array([2*i for i in range(11)])

	regressor = Linear_Regression(X, Y)

	iterations = 0
	steps = 100
	learning_rate = 0.01
	costs = []
	
	#original best-fit line
	Y_pred = regressor.predict()
	regressor.plot_best_fit(Y_pred, 'Initial Best Fit Line')
	

	while 1:
		Y_pred = regressor.predict()
		cost = regressor.compute_cost(Y_pred)
		costs.append(cost)
		regressor.update_coeffs(learning_rate)
		
		iterations += 1
		if iterations % steps == 0:
			print(iterations, "epochs elapsed")
			print("Current accuracy is :",
				regressor.get_current_accuracy(Y_pred))

			stop = input("Do you want to stop (y/*)??")
			if stop == "y":
				break

	#final best-fit line
	regressor.plot_best_fit(Y_pred, 'Final Best Fit Line')

	#plot to verify cost function decreases
	h = plt.figure('Verification')
	plt.plot(range(iterations), costs, color='b')
	h.show()

	# if user wants to predict using the regressor:
	regressor.predict([i for i in range(10)])

if __name__ == '__main__':
	main()

At its core, you can see that the block of code trains a gradient descent algorithm for a linear regression machine learning model using 0.01  as its learning rate on 100 steps.

Upon running the code above, the output shown is given below:

Conclusion

In conclusion, it is important to note that the gradient descent algorithm is especially important in the artificial intelligence and machine learning domains as the models must be optimized for accuracy.  

In this article, you learnt what the Gradient Descent algorithm is, how it works, its formula, what learning rate is, and the importance of picking the right learning rate. You also saw a code illustration of how Gradient Descent works.

Original article source at https://www.freecodecamp.org

#machinelearning #algorithms

How to Create A Final Class in PHP

PHP provides you with the final keyword that you can use as a modifier for classes and functions.

When you add the final keyword to a class, that class can’t be extended.

Here’s an example of creating a final class:

<?php

final class Car {
    function start(){
        print "Start the engine";
    }
}

PHP will throw an error when you try to extend a final class as shown below:

class Tesla extends Car {}
// Fatal error: 
// Class Tesla cannot extend final class Car

The final keyword is useful to restrict a class, removing the possibility of extending that class.

You can also put the final keyword in front of class functions to disable child classes from overriding that function:

<?php

class Car {
  final function start(){
      print "Start the engine";
  }
}

class Tesla extends Car {
  // 👇 Cannot override final method Car::start()
  function start(){
    print "Tesla starting...";
  }
}

Now you’ve learned how to create a final class in PHP.

Original article source at: https://sebhastian.com/ 

#php #final #class 

How to Create a Spin Wheel App with HTML, CSS & JavaScript

This tutorial shows how to create a spin wheel app HTML, CSS and Javascript. Create a customizable spinner wheel app that spins on a button click and randomly picks a number, text etc.

Project Folder Structure:

Before we start coding let us create the project folder structure. We create a project folder called – the ‘Spin Wheel App’. Inside this folder, we have three files. These files are index.html, style.css and script.js. The first file is the HTML document, the next file is the stylesheet and lastly, we have the script file.

HTML:

We begin with the HTML code. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spin Wheel App</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="container">
        <canvas id="wheel"></canvas>
        <button id="spin-btn">Spin</button>
        <img src="spinner-arrow-.svg" alt="spinner-arrow" />
      </div>
      <div id="final-value">
        <p>Click On The Spin Button To Start</p>
      </div>
    </div>
    <!-- Chart JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <!-- Chart JS Plugin for displaying text over chart -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style this app with CSS. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background: linear-gradient(135deg, #c3a3f1, #6414e9);
}
.wrapper {
  width: 90%;
  max-width: 34.37em;
  max-height: 90vh;
  background-color: #ffffff;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 3em;
  border-radius: 1em;
  box-shadow: 0 4em 5em rgba(27, 8, 53, 0.2);
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
#wheel {
  max-height: inherit;
  width: inherit;
  top: 0;
  padding: 0;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
#spin-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  height: 26%;
  width: 26%;
  border-radius: 50%;
  cursor: pointer;
  border: 0;
  background: radial-gradient(#fdcf3b 50%, #d88a40 85%);
  color: #c66e16;
  text-transform: uppercase;
  font-size: 1.8em;
  letter-spacing: 0.1em;
  font-weight: 600;
}
img {
  position: absolute;
  width: 4em;
  top: 45%;
  right: -8%;
}
#final-value {
  font-size: 1.5em;
  text-align: center;
  margin-top: 1.5em;
  color: #202020;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .wrapper {
    font-size: 12px;
  }
  img {
    right: -5%;
  }
}

Javascript:

Finally, we implement the functionality of this app with javascript Once again copy the code below and paste it into your script file.

const wheel = document.getElementById("wheel");
const spinBtn = document.getElementById("spin-btn");
const finalValue = document.getElementById("final-value");
//Object that stores values of minimum and maximum angle for a value
const rotationValues = [
  { minDegree: 0, maxDegree: 30, value: 2 },
  { minDegree: 31, maxDegree: 90, value: 1 },
  { minDegree: 91, maxDegree: 150, value: 6 },
  { minDegree: 151, maxDegree: 210, value: 5 },
  { minDegree: 211, maxDegree: 270, value: 4 },
  { minDegree: 271, maxDegree: 330, value: 3 },
  { minDegree: 331, maxDegree: 360, value: 2 },
];
//Size of each piece
const data = [16, 16, 16, 16, 16, 16];
//background color for each piece
var pieColors = [
  "#8b35bc",
  "#b163da",
  "#8b35bc",
  "#b163da",
  "#8b35bc",
  "#b163da",
];
//Create chart
let myChart = new Chart(wheel, {
  //Plugin for displaying text on pie chart
  plugins: [ChartDataLabels],
  //Chart Type Pie
  type: "pie",
  data: {
    //Labels(values which are to be displayed on chart)
    labels: [1, 2, 3, 4, 5, 6],
    //Settings for dataset/pie
    datasets: [
      {
        backgroundColor: pieColors,
        data: data,
      },
    ],
  },
  options: {
    //Responsive chart
    responsive: true,
    animation: { duration: 0 },
    plugins: {
      //hide tooltip and legend
      tooltip: false,
      legend: {
        display: false,
      },
      //display labels inside pie chart
      datalabels: {
        color: "#ffffff",
        formatter: (_, context) => context.chart.data.labels[context.dataIndex],
        font: { size: 24 },
      },
    },
  },
});
//display value based on the randomAngle
const valueGenerator = (angleValue) => {
  for (let i of rotationValues) {
    //if the angleValue is between min and max then display it
    if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {
      finalValue.innerHTML = `<p>Value: ${i.value}</p>`;
      spinBtn.disabled = false;
      break;
    }
  }
};

//Spinner count
let count = 0;
//100 rotations for animation and last rotation for result
let resultValue = 101;
//Start spinning
spinBtn.addEventListener("click", () => {
  spinBtn.disabled = true;
  //Empty final value
  finalValue.innerHTML = `<p>Good Luck!</p>`;
  //Generate random degrees to stop at
  let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);
  //Interval for rotation animation
  let rotationInterval = window.setInterval(() => {
    //Set rotation for piechart
    /*
    Initially to make the piechart rotate faster we set resultValue to 101 so it rotates 101 degrees at a time and this reduces by 1 with every count. Eventually on last rotation we rotate by 1 degree at a time.
    */
    myChart.options.rotation = myChart.options.rotation + resultValue;
    //Update chart with new value;
    myChart.update();
    //If rotation>360 reset it back to 0
    if (myChart.options.rotation >= 360) {
      count += 1;
      resultValue -= 5;
      myChart.options.rotation = 0;
    } else if (count > 15 && myChart.options.rotation == randomDegree) {
      valueGenerator(randomDegree);
      clearInterval(rotationInterval);
      count = 0;
      resultValue = 101;
    }
  }, 10);
});

📁 Download Source Code: https://www.codingartistweb.com

#html #css #javascript 

Final vs Const in Dart & Flutter | TextButton, ElevatedButton & OutlinedButton #11

In this video we will understand difference between final and const keyword in dart & flutter then we will learn about buttons in flutter

code - https://github.com/mukeshphulwani66/Flutter-course-projects

#flutter

connect with me on -
facebook :https://www.facebook.com/mukesh.phulwani.5
instagram : https://www.instagram.com/mukeshphulwani66
linkedin: https://www.linkedin.com/in/mukesh-phulwani-681450152/
github: https://github.com/mukeshphulwani66
codersneverquit website : https://www.codersneverquit.in/

#flutter #final #const #dart & flutter