O Front-End como você conhece vai morrer Insights e estudos até agora
Carla Vieira | @carlaprvieira
Slide 2
Graduanda de Sistemas de Informação pela USP Aluna Especial pela USP
Professora de Desenvolvimento Web na Habits
Mestrado (em breve) rs
Professora de introdução a IA e ML
FORMAÇÃO
ENSINO
Desenvolvedora Coordenadora Perifacode
TRABALHO
Carla Vieira Developer, Speaker and Artificial Intelligence Evangelist
@carlaprvieira
O fim do front-end? Embora muitas profissões possam ser substituídas por máquinas, alguns empregos ainda estão seguros devido à habilidades essencialmente humanas como a Criatividade
Slide 7
1 HISTÓRIA
2
3
4
5
INTELIGÊNCIA ARTIFICIAL
MACHINE LEARNING NO FRONT-END
FUTURO DAS INTERFACES HUMANOCOMPUTADOR
CONCLUSÃO
Evolução da web
2.0
3.0
4.0
Information
People
Machine
Agent
World Wide Web
Redes sociais
Big Data
Homem x Máquina
2004
2015
?
1.0 1995
Slide 17
Evolução da web
1.0 Information World Wide Web
1995
One-way communication
Usuários passivos Conteúdos estáticos
Slide 18
Evolução da web
2.0 People Redes sociais
2004
Popularização de blogs e redes sociais Marketing e Publicidade Usuário Ativo
Slide 19
Evolução da web
3.0 Machine Big Data
2010
Semântica Personalização de produtos e serviços Algoritmos…
Slide 20
Evolução da web
4.0 Agent Homem x Máquina
?
Web simbiótica
Limite homem x máquina
Slide 21
Evolução do front-end
Slide 22
Slide 23
Slide 24
Slide 25
2
O que é Inteligência Artificial?
Slide 26
Conceituação INTELIGÊNCIA MACHINE ARTIFICIAL LEARNING Programas com habilidade de agir como humanos
1950
Algoritmos com habilidade de aprender sem programação expressa
1980
DEEP LEARNING Redes neurais artificiais que aprendem através de um grande volume de dados
2010
Slide 27
Programação Tradicional x Machine Learning Exemplo: Reconhecimento de Spam
Slide 28
Programação Tradicional x Machine Learning Exemplo: Reconhecimento de Spam
if(email.includes(‘viagra’)){ filterAsSpam(email); } else if(email.includes(‘v!agra’)){
filterAsSpam(email); } else if(…){ …. }
import * as spamModel from “model.json” const model = load(spamModel);
const newEmail = getEmail(); const prediction = model.predict(newEmail); prediction === 0 ? spam : not spam
Slide 29
Anatomia de uma rede neural Camada de entrada
Camadas:
utilizadas para construção de redes neurais
Imagem de entrada
Camada escondida Camada de saída
Saída
Slide 30
3
Machine Learning no Desenvolvimento Front-End
Slide 31
Web Development workflow
Slide 32
Saídas
Entradas
Slide 33
Deep Learning
Slide 34
Microsoft AI Sketch2Work
https://azure.microsoft.com/pt-br/blog/turn-your-whiteboard-sketches-toworking-code-in-seconds-with-sketch2code/
“Nossa visão é capacitar as pessoas com
Inteligência Artificial porque acreditamos em um futuro onde as máquinas auxiliam os seres humanos, não os substituem.” Tony - Uizard
Slide 41
Autocompletion with deep learning (TabNine)
TabNine
Slide 42
Autocompletion with deep learning (TabNine)
Deep Learning ~2M Github Files
Slide 43
4
Futuro das interfaces humano-computador
Slide 44
System Hardware Controls
Comandos e interfaces no
mainframe 1970s
Slide 45
GUI e CLI
Graphical User Interface – utilização de menus e objetos
CLI – Command-Line Interface 1970s
Slide 46
Mobile e Touch Screen
Dispositivos mobile Substituição do mouse 2000s
Slide 47
VR – Virtual Reality “O conhecimento intuitivo do usuário a respeito do mundo
físico pode ser transferido para 2010s
manipular o mundo virtual.”
Slide 48
VUI – Voice User Interface Web Services e Internet das Coisas Acessibilidade Hardware compatível 2010s
Inteligência Artificial
Slide 49
VUI – Voice User Interface A fala é um meio fundamental de comunicação em todas as culturas, sendo também o meio primário para 2010s
construir relações.
We need systems that interact like humans but think like machines
Slide 52
Se a voz é o futuro das interfaces de computação, e aqueles que não podem ouvir ou falar?
Slide 53
Acessibilidade
import {KNNImageClassifier} from ‘deeplearn-knn-image-classifier’; import * as dl from ‘deeplearn’; const IMAGE_SIZE = 227; const TOPK = 10;
Making Amazon Alexa respond to sign language using AI - Abhishek Singh
Slide 54
Acessibilidade
Making Amazon Alexa respond to sign language using AI - Abhishek Singh
Slide 55
Ferramentas
Slide 56
Limites • Pode levar muito tempo para treinar modelo
• Lembre-se da importância da experiência mobile • Modelos caixa preta • Ética
Slide 57
Qual o futuro que estamos escrevendo?
Slide 58
Slide 59
Slide 60
Bias
Human Bias
Technology
Slide 61
5
Conclusão
Slide 62
O front-end vai morrer?
Slide 63
O front-end vai morrer?
Não!
Slide 64
#0
O front-end do futuro será mais integrado e diversificado
Slide 65
#1
Developers e Designers Relacionamentos colaborativos mais profundos Para tirar vantagem do uso de Machine Learning
Slide 66
#2
Novas necessidades As necessidades irão mudar, IA terá um papel fundamental na nossa sociedade Novos produtos baseados em IA
Slide 67
#3
Obtenha o máximo de
conhecimento de aprendizado de máquina que puder
Slide 68
#4
Continue sendo criativo e pense em novas maneira de aplicar o aprendizado de máquina
Ferramentas de ML Magenta.js
Brain.js
Tensorflow playground
NeuroJS
Synaptic.js
Jupyter Notebooks
ConvNetJS
Natural
ML5.js
WebDNN
Neataptic
Amazon ML
Ml.js
Google Colab
Microsoft ML APIs
AIJS
Teachable machine boilerplate
Google Cloud AI
Keras.js
PoseNet
ONNX.js
Tensorflow.js examples
machine_learning
Slide 72
Referências Udacity - Intro to Machine Learning
A Brief History of Front-end Frameworks
Google - Machine learning crash course
Airbnb - Sketching interfacs
CreativeAI
Mercado Front-End: da origem até o futuro
AI experiments
A brief history of the internet over the past 20 years and the role of the World Wide Web
A internet e o poder da comunicação na sociedade em rede: influências nas formas de interação social History of Web (WebFoundation.org) O inicio, o fim e o meio do Desenvolvimento Front-End - Felipe Fialho